从TabNavigator中的视图中与StackNavigator的navigationOptions进行交互

Question

如何让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} />
        }
    }
}

Answer 1

我在尝试错误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);
        }} />
    );
}

结果：