Question

我有 Home.js 的代码是组件父级。我想在组件 CartScreen 的 resetCart() 之后调用函数 reload() 在 HomeScreen 以重置徽章购物车。

reload = () =>{
        this.componentDidMount();
    }
    componentDidMount(){
        this._isMounted = true;
        this.props.navigation.addListener('focus',()=>{
            if(this._isMounted){
                this.checkInternet();
                this._getasyc();
            }
        });
        
        this.checkInternet();
        this._getasyc();
    }

render(){
    //    const {ten} = this.props.route.params
        return(
            <View style={{ flex:1 }}>
                <StatusBar backgroundColor='#555555' barStyle="light-content" />
                <Appbar style={styles.appbar}>
                    <Appbar.Action icon="format-list-bulleted" onPress={()=>(this.props.navigation.dispatch(DrawerActions.openDrawer()))}/>
                    <Appbar.Content title="GREAT FOOD" />
                    <Badge  
                        visible={this.state.itemcart && this.state.itemcart >0}
                        size={17}
                        style={{ position: 'absolute', top: 5, right: 55 }}>{this.state.itemcart}</Badge>
                    <Appbar.Action icon="cart" onPress={()=>{this.props.navigation.navigate('cart')}}/>
                    <Appbar.Action icon="phone-in-talk" onPress={()=>{this.contact()}}/>
                </Appbar>
                
                <Drawer.Navigator 
                    overlayColor="transparent"   

                > 
                    <Drawer.Screen name ="home" component={HomeScreen} 
                        options={{
                            drawerLabel:"Menu",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="home" color={color} size={26} />
                        ), }}
                        />
                    <Drawer.Screen name="profile" component={ProfileScreen}
                            options={{
                            drawerLabel:"Hồ sơ",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="account-circle" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="fullfood" component={FullFood}
                        options={{
                            drawerLabel:"Tất cả món ăn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="food" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name= "favourite" component={FavouriteScreen}
                        options={{    
                            drawerLabel:"Yêu thích",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="heart-pulse" color={color} size={26} />
                        ), }}
                    />
                     <Drawer.Screen name= "booking" component={BookingScreen}
                        options={{
                            drawerLabel:"Đặt bàn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="table-furniture" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="cart" component={CartScreen} 
                        options={{
                            drawerLabel:"Giỏ hàng",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="cart" color={color} size={26} />
                        ), }}
                        
                    />
                    <Drawer.Screen name="setting" component={SettingScreen}
                        options={{
                            drawerLabel:"Cài đặt",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="wrench-outline" color={color} size={26} />
                        ), }}
                    />
                </Drawer.Navigator>
             <Snackbar
                visible={this.state.statusInform}
                onDismiss={()=>{this}}
                action={{
                label: 'Tắt',
                onPress: () => {
                this.setState({statusInform:false})
              },
             }}>
            Vui lòng kiểm tra kết nối.
            </Snackbar>
        </View>
        )
    }
}

现在。我想从 CartScreen 调用函数 reload() 所以我必须做什么。这是我在 CartScreen 上的函数 resetCart()。

 _resetCart = async()=>{
        this.setState({spinner:true});
        setTimeout(() => {
            this.setState({spinner:false})
        }, 1000);
        await AsyncStorage.removeItem('keyOrdermonan'); 
        this.setState({getMangAsync:[],tongTien:0});
        this._getAsync();
        // this.props.reloadnaonao();
    }

我已经尝试在 CartScreen 上使用 this.props.function() 但我不知道如何在 HomeScreen 上调用函数。谁来帮帮我！

Answer 1

您可以使用 ref 为您的子组件提供 ref，然后您可以使用 yourRefName.current.methodName() 调用其方法；并像这样改变你的抽屉屏幕 ()}

For reference Refer this

如何从组件父级为组件子级调用函数 Drawer Navigator

1 个答案: