react-native - 如何从反应导航 v3.xx 中的选项卡更新自定义 tabBarComponent 值
问题描述
如何从反应导航 v3.xx 中的选项卡更新 tabBar 值?我有一个自定义标签栏组件,看起来像
我想从标签屏幕更新总 XXX 值。在我的屏幕内,我拨打电话以获取余额,成功后我想更新余额,但我不知道如何。
class Veggies extends React.Component {
timer = null;
state = {
balance: 0,
isLoading: false,
};
getBalance = () => {
this.setState({
isLoading: true,
});
this.timer = setTimeout(() => {
this.setState({
balance: 200,
isLoading: false,
});
}, 2000);
};
render = () => {
return (
<View>
{this.state.isLoading ? (
<Text>Getting balances...</Text>
) : (
<Text>Your balance: {this.state.balance}</Text>
)}
<Button onPress={this.getBalance} title="Get balance" />
</View>
);
};
}
我的自定义标签栏组件
const TabBar = props => {
const { navigationState, navigation, position } = props;
return (
<View>
<Text>Your total is : XXX</Text>
<View
style={{
height: 80,
backgroundColor: 'seashell',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
}}>
{navigationState.routes.map((route, index) => {
const focusAnim = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [0, 1, 0],
});
return (
<Tab
focusAnim={focusAnim}
title={route.routeName}
onPress={() => navigation.navigate(route.routeName)}
/>
);
})}
</View>
</View>
);
};
这是我的导航器
const TabNavigator = createMaterialTopTabNavigator(
{
Vegetables: {
screen: Veggies,
},
Fruits: {
screen: Fruits,
},
},
{
tabBarComponent: TabBar,
}
);
export default createAppContainer(TabNavigator);
我知道我可以使用像 redux 这样的状态管理库轻松实现这一点,但我不想使用任何状态管理库。
解决方案
如果您不想使用状态管理库,请使用事件。在 TabBar 中添加事件侦听器并在选项卡中发出事件。
import React from 'react';
import { View, Text, Button, DeviceEventEmitter } from 'react-native';
class Veggies extends React.Component {
timer = null;
state = {
balance: 0,
isLoading: false,
};
getBalance = () => {
this.setState({
isLoading: true,
});
this.timer = setTimeout(() => {
//emit event here
DeviceEventEmitter.emit('updateBalance', 200);
this.setState({
balance: 200,
isLoading: false,
});
}, 2000);
};
render = () => {
return (
<View>
{this.state.isLoading ? (
<Text>Getting balances...</Text>
) : (
<Text>Your balance: {this.state.balance}</Text>
)}
<Button onPress={this.getBalance} title="Get balance" />
</View>
);
};
}
在您的 TabBar 组件中添加事件侦听器
class TabBar extends React.Component {
state = {
balance: 0,
};
handleEevent = balance => {
this.setState({
balance: balance,
});
};
componentDidMount = () => {
DeviceEventEmitter.addListener('updateBalance', this.handleEevent);
};
componentWillUnmount = () => {
DeviceEventEmitter.removeListener('updateBalance', this.handleEevent);
};
render = () => {
const { navigationState, navigation, position } = this.props;
return (
<SafeAreaView>
<Text>Your total is : {this.state.balance}</Text>
<View
style={{
height: 80,
backgroundColor: 'seashell',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
}}>
{navigationState.routes.map((route, index) => {
const focusAnim = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [0, 1, 0],
});
return (
<Tab
focusAnim={focusAnim}
title={route.routeName}
onPress={() => navigation.navigate(route.routeName)}
/>
);
})}
</View>
</SafeAreaView>
);
};
}
推荐阅读
- html - “溢出:隐藏”替代方法来切断 div 容器上方的元素
- git - 出现错误:将 WebApp 部署到 Azure 时出现 409 冲突
- python - 阿拉伯数字到罗马数字转换器:包含 4 的数字不会转换
- javascript - 如何在推送到 Github 时隐藏数据库连接信息,但又能方便地恢复?
- python - 如何修复“语法错误:等待仅在异步函数中有效”
- sql - If Not Exists 在更新记录的循环内插入
- c# - 在对象后面抽象时将 SQL 日期时间转换为 C# 日期时间
- javascript - 在 Chrome 中发出警报后如何在 javascript 中重新加载页面
- python - 提交表单后如何修复 validate_on_submit() 函数抛出的异常
- graph - 具有 NP 复杂性的最长路径问题的示例?