Reactjs React导航中的动态组件

我希望在react导航标题栏中有一个动态rightComponent。可以在屏幕的导航选项中将正确的组件设置为按钮，但无法在用户与页面交互时动态更改按钮的禁用属性

我尝试过的：

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

静态导航选项=（{navigation}）=>{
返回{
标题：“选择图像”，
头灯：
{navigation.navigate（'Route'）}
disabled={this.state.canContinue}
/>
};

};

静态导航选项=（{navigation}）=>{
返回{
标题：“选择图像”，
头灯：
{navigation.navigate（'Route'）}
disabled={this.canContinue（）}
/>
};
};
建造师（道具）{
超级（道具）；
this.canContinue=this.canContinue.bind（this）；
}
癌症持续（）{
//只是为了测试
返回true；
}

它给我一个错误，这是未定义的。你们中有人也提出了同样的挑战并得到了一个很好的解决方案吗

---

干杯

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

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),
  });
}

静态导航选项=（{navigation}）=>{
返回{
标题：“选择图像”，
头灯：
{navigation.navigate（'Route'）}
disabled={navigation.state.params？navigation.state.params.canContinue（）：false}
/>
};
};
componentDidMount（）{
//使用setParams设置处理程序方法
this.props.navigation.setParams（{
canContinue:this.canContinue.bind（this），
});
}

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

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),
  });
}

静态导航选项=（{navigation}）=>{
返回{
标题：“选择图像”，
头灯：
{navigation.navigate（'Route'）}
disabled={navigation.state.params？navigation.state.params.canContinue（）：false}
/>
};
};
componentDidMount（）{
//使用setParams设置处理程序方法
this.props.navigation.setParams（{
canContinue:this.canContinue.bind（this），
});
}

嗨！谢谢你的回答。我已经尝试了一种稍微不同的形式。您的解决方案给我的错误是“未定义的不是对象”。我对它进行了如下修改：

disabled={navigation.state.params？navigation.state.params.canContinue（）：false}

现在它可以工作了。上次我想弄明白的时候，我没有想到这个解决方案，哈哈，谢谢！这是给你未定义的，因为它只有在组件呈现（ComponentDidMount）后才被绑定，所以最初你得到的是未定义的，嗨！谢谢你的回答。我已经尝试了一种稍微不同的形式。您的解决方案给我的错误是“未定义的不是对象”。我对它进行了如下修改：

disabled={navigation.state.params？navigation.state.params.canContinue（）：false}

现在它可以工作了。上次我想弄明白的时候，我没有想到这个解决方案，哈哈，谢谢！这是给您未定义的，因为它仅在呈现组件（ComponentDidMount）后绑定，所以最初您得到的是未定义的，