[英]Which component life cycle gets called everytime the screen mounts in react native?
我正在从 firebase 带来图像。 我的主屏幕第一次打开我的应用程序时工作正常,但是当我转到其他屏幕并返回主屏幕时,只会加载一个图像,这是 firebase 中的最后一个图像。 我的唯一目的是从 firebase 中获取图像并通过 flatlist 在主页上显示图像。 在第一次发生时,但是当我通过抽屉导航到其他屏幕并再次返回时,只有最后一个 img 从 firebase 被调用。
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
backgroundImageUrl : [],
}
}
static navigationOptions = {
header: null ,
headerForceInset: {vertical: 'never'},
};
componentWillMount()
{
firebase.database().ref().child("Card_Images/").on("child_added", function(snapshot) {
this.setState({
backgroundImageUrl : [...this.state.backgroundImageUrl, snapshot.val()],
})
}.bind(this))
}
handleTap = () => {
// console.log("item", item);this.props.screenProps.navigation.navigate("ItemDetails",
this.props.navigation.navigate("ItemDetails")};
renderItem = ({ item }) => {
return (
<TouchableOpacity style={styles.itemContainer}
onPress = {this.handleTap}>
<View style = {{height:180,width:Dimensions.get('window').width-32,marginLeft:16,marginRight:16,backgroundColor: 'black',marginTop: 16,marginBottom:16,
borderRadius: 16}}>
<Image
style={{
width:Dimensions.get('window').width-32,
height:160,
resizeMode:"cover",
alignSelf: 'center',
borderRadius:8,
}}
source = {{ uri: item }}
//onPress = {() => this.selectCity()}
/>
<View style = {styles.DesignInformation}>
<Text style={{color:'grey',fontSize: 10,fontWeight:"bold",marginLeft:2}}> Rishavh Gupta </Text>
<Text style={{color:'grey',textAlign:"right",fontSize: 10,fontStyle: 'italic',marginRight:8,
shadowOffset: { width: 5, height: -1 }, elevation:4,borderBottomColor:'white',borderBottomWidth:0.8,shadowColor: "gray",shadowOpacity: 0.5,shadowRadius: 4}}>www.cometgraphic.com </Text>
</View>
</View>
</TouchableOpacity>
);
};
render() {
console.log("images are", this.state.backgroundImageUrl)
// console.log("sd", this.state.backgroundImageUrl)
return (
<View style = {styles.container}>
<FlatList
data={this.state.backgroundImageUrl}
renderItem={this.renderItem}
keyExtractor={item => item.id}
numColumns={numColumns}
/>
为了调试问题,我想知道您的图像数组第二次包含的条目数 或者,您可以将列表保存在您的 redux 存储中,而不是将其保留在组件的状态中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.