React 导航中的动态 rightComponent

Question

我想在我的 react-navigation 标题栏中添加一个动态的 rightComponent。可以在屏幕的 navigationOptions 中将正确的组件设置为按钮，但在用户与页面交互时无法动态更改按钮的 disabled-prop。

我尝试过的：

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={this.state.canContinue}
            />
    };

};

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={this.canContinue()}
            />
    };
};
constructor(props){
    super(props);
    this.canContinue = this.canContinue.bind(this);
}
canContinue(){
//just for testing
return true;
}

它向我抛出了未定义的错误。你们中有人挑战过同样的问题并得到了很好的解决方案吗？

干杯！

Answer 1

您不能直接使用它。您需要将其保存在导航参数中。

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={navigation.state.params?navigation.state.params.canContinue():false}
            />
    };
};

componentDidMount() {
  // set handler method with setParams
  this.props.navigation.setParams({ 
    canContinue: this.canContinue.bind(this),
  });
}