javascript - 如何从组件父级为组件子级 Drawer Navigator 调用函数
问题描述
我有 Home.js 的代码是组件父母。我想在组件 CartScreen 的 resetCart() 之后,然后我将在 HomeScreen 调用函数 reload() 来重置徽章购物车。
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 上调用函数。任何人帮助我!
解决方案
you can do it using ref provide a ref to your child component and then you can call its methods using yourRefName.current.methodName(); and change your Drawer Screen like this <Drawer.Screen name="cart" component={() => ()}
推荐阅读
- sql - 如何在 sql 中获取过去 1 小时的结果
- javascript - 我正在尝试向 Vue.js 添加效果,但没有发生任何事情
- yaml - 在 YAML 多行字符串的第一行保留前导空格
- sql - 在 Order by | 中使用 Case 表达式时的不同之处 SQL
- android - 从日期和时间 Android 获取时间戳
- html - 为什么图片加载不出来?
- localization - 如何使用反应路由器和 i18 直接从 url 配置本地化作为语言参数?
- html - 页面右侧的空间
- python - 为什么 pop 方法不打破这个例子中的 while 循环?
- pandas - 应用 DateFormatter 和 WeekdayLocator 后,时间序列中的条形图超出最后一个日期