Interact with StackNavigator's navigationOptions from view inside of TabNavigator

How can I make navigationOptions interact with view inside of TabNavigator?

for example, from this question how do I access a component’s state from static navigationOptions, I can make navigationOptions responsive to component’s state.

But what if I want to make it responsive a step further, responsive to component’s state inside of TabNavigator?

As image shows below, I want to make Next button enabled only if more than one checkbox get checked.

But there’s no effect to provide headerRight in my component.

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} />
        }
    }
}

I found an answer myself after try error 3 hours…

follow these steps you can have a workable version.

1. Instead of expose TabNavigator directly, wrap it.

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

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

2. Pass callback function down with screenProps. When called, setParams() into 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. Inside main component, pass function with screenProps.callback.

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

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

result: