scrollToTop() {
this.scrollView && this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
}
onScroll = event => {
const offsetX = event.nativeEvent.contentOffset.x;
if (offsetX >= UI.scaleSize(500)) {
DeviceEventEmitter.emit('bottomVisible', true);
} else {
DeviceEventEmitter.emit('bottomVisible', false);
}
};
import React, { useState, useEffect, useCallback } from 'react';
import { View, StyleSheet, TouchableOpacity, DeviceEventEmitter } from 'react-native';
import FastImage from 'react-native-fast-image';
import UI from '~/modules/UI';
import MyTouchable from '~/components/my-touchable';
const backImg = require('./img/bottomBack.png');
const giftImg = require('./img/bottomGift.png');
function Bottom(props) {
const { giftClick, backClick } = props;
const [visible, setVisible] = useState(false);
const callback = useCallback(
display => {
if (display !== visible) {
setVisible(display);
}
},
[visible],
);
useEffect(
() => {
const listen = DeviceEventEmitter.addListener('bottomVisible', callback);
return () => listen.remove();
},
[callback],
);
return (
<View style={styles.container}>
<View style={styles.flexView} />
{visible ? (
<View style={styles.rowView}>
<MyTouchable onPress={giftClick} style={styles.touch}>
<FastImage source={giftImg} style={styles.giftImg} resizeMode="contain" />
</MyTouchable>
<TouchableOpacity onPress={backClick} style={styles.touch}>
<FastImage source={backImg} style={styles.backImg} resizeMode="contain" />
</TouchableOpacity>
{/* <Text onPress={accountPress}>账号信息</Text> */}
</View>
) : (
<View style={styles.rowView} />
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
height: UI.scaleSize(66),
alignItems: 'center',
flexDirection: 'row',
},
flexView: {
flex: 1,
},
rowView: {
width: UI.scaleSize(147),
height: UI.scaleSize(50),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
touch: {
width: UI.scaleSize(50),
height: UI.scaleSize(50),
alignItems: 'center',
justifyContent: 'center',
},
giftImg: {
width: UI.scaleSize(40),
height: UI.scaleSize(40),
},
backImg: {
width: UI.scaleSize(40),
height: UI.scaleSize(40),
},
});
export default Bottom;
