如何将组件的状态传递给导航 react native 中的选项 (react navigation)

Question

我试图将状态传递到本机导航中的顶部栏。

这是我的组件的外观：

export default class Main extends Component {
    constructor() {
    super()
    this.state = {  
        value: ""
    };
  }
    static navigationOptions = {
    tabBarLabel: () => (
        <View style={styles.container}>
        <Text style={styles.text}>
{this.state.value}
        </Text> 
        </View>
    ),  
  };
}

我在行{this.state.value}上收到错误 Type Error: Cannot read property 'value' of undefined。我做错了吗？

Answer 1

是的，这是react-navigation的痛点之一。static关键字指示此对象是类Main的一部分，但不需要类的实例才能运行。因此，您可以这样调用：

Main.navigationOptions.tabBarLabel()

这意味着您无法从声明为navigationOptions对象的属性的函数中参考组件状态。您可以做的是从componentDidMount或其他生命周期功能调用navigation.setParams({ foo: ... })，如果您需要从组件中更改标题或标签。

我尝试尽可能地避免此类更新，因为如果在组件安装之前未定义值，则可能会使用户看起来有些慢。