Question

我想在我的反应导航标题栏中添加一个动态的rightComponent。可以在屏幕的NavigationOptions中将正确的组件设置为按钮，但是当用户与页面交互时，无法动态更改按钮的disable-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),
  });
}

React导航中的动态rightComponent

};

1 个答案: