从 TabNavigator 内部视图与 StackNavigator 的导航选项交互

Question

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

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

但是如果我想让它响应更进一步，响应 TabNavigator 内部组件的 state 怎么办？

如下图所示，我只想在选中多个复选框时才启用 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);
        }} />
    );
}

结果：