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对象属性的函数中引用组件状态。如果您需要更改组件中的标题或标签，您可以从navigation.setParams({ foo: ... })或其他生命周期函数调用componentDidMount。

我尝试尽可能避免这种更新，因为如果在组件安装之前没有定义值，用户可能会觉得有点慢。

如何将组件的状态传递给navigationOptions in react native（react navigation）

1 个答案: