Блог

У меня есть проект, в котором я использую react-navigation, и я реализую нижнюю вкладку, подобную этой:

  render() {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={this.HomeScreen} />
                <Tab.Screen name="Settings" component={this.SettingsScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}
  

..который вызывается this.HomeScreen на одном из экранов, а затем this.SettingsScreen на другом.

Здесь я опубликую код первого из них:

 HomeScreen({ navigation }) {      
    const restaurants_discounts = this.restaurants_discounts();     
    return (
        <SafeAreaView style={styles.safeArea}>                
            <View style={styles.container}>                   
                <ScrollView
                     style={styles.scrollview}
                     scrollEventThrottle={200}
                     directionalLockEnabled={true}>                        
                     {restaurants_discounts}      
                </ScrollView>
            </View>
        </SafeAreaView >
    );
}
  

При вызове функции ниже у нее нет данных для отображения, потому что this.state.discounts она пуста, так как getDiscounts() вызывается позже :

  restaurants_discounts() {
    return (
        <View style={styles.exampleContainer}>             
            <Carousel
                ref={c => this._slider1Ref = c}
                data={this.state.discounts}
                renderItem={this._renderDiscounts.bind(this)}                   
                ...           
            >
            </Carousel>
        </View>
    );
}


getDiscounts() {   //this is being called after `restaurants_discounts()` has been called 
        var ref = firestore().collection('discounts')
        ref.onSnapshot((querySnapshot => {
             var discounts = querySnapshot.docs.map(doc => { return { ...doc.data(), discount_id: doc.id } });
             this.setState({
                discounts: discounts                        
             });                
        }));
    }
}
  

getDiscounts() вызывается в componentDidMount() :

 componentDidMount() {   
   this.getDiscounts();
}
  

вы возвращаете компонент только тогда, когда определено this.state.discount . Например:

     restaurants_discounts() {
        if (this.state.discounts === undefined || this.state.discounts === null) 
            return (<View><Text>Loading...</Text></View>);
        return ( 
            <View style={styles.exampleContainer}>             
                <Carousel
                    ref={c => this._slider1Ref = c}
                    data={this.state.discounts}
                    renderItem={this._renderDiscounts.bind(this)}                   
                    ...           
                >
                </Carousel>
            </View>
        );
    }