javascript - 从TabNavigator内部的 View 与StackNavigator的navigationOptions进行交互

如何使navigationOptions与TabNavigator内部的视图交互？

例如，根据这个问题how do I access a component's state from static navigationOptions，我可以使navigationOptions响应组件的state。

但是，如果我想使其响应进一步，对state内部的组件TabNavigator进行响应，该怎么办？

如下图所示，仅当选中多个复选框时，我才想启用Next按钮。


但是在我的组件中提供headerRight无效。

export class CreateGroupCamera extends Component {
    static navigationOptions = ({ navigation }) => {
        const { state, setParams, navigate } = navigation;
        const params = state.params || {};

        return {
            headerTitleStyle: { alignSelf: 'center' },
            headerRight: <Button title='Next' disabled={params.validator ? !params.validator() : true} />
        }
    }
}

最佳答案

尝试错误3小时后，我自己找到了答案...

请按照以下步骤操作，以获取可行的版本。

1.包装而不是直接暴露TabNavigator。

const Tabs = TabNavigator({
    ...
});

export class TabView extends Component {
    render() {
        return (<Tabs />);
    }
}

2.使用screenProps向下传递回调函数。调用时，将setParams()转换为navigationOptions。

export class TabView extends Component {
    static navigationOptions = ({navigation}) => {
        const { state, setParams, navigate } = navigation;
        const params = state.params || {};
        return {
            headerRight = <Button title='Next' disabled={params.validator ? !params.validator() : true} />
        };
    }

    _validator(validator) {
        this.props.navigation.setParams({validator});
    }

    render() {
        return (<Tabs screenProps={{ callback: this._validator } />);
    }
}

3.在主要组件内部，通过screenProps.callback传递函数。

_validator() {
    return this.selectedDevices().length > 0;
}

render() {
    return (
        <Checkbox onChecked={ () => {
            this.props.screenProps.callback(this._validator);
        }} />
    );
}

结果：