Реагировать экран обновления навигации на конкретной вкладке

Question

Я новичок в реакции на родную.У меня есть навигация (нижняя навигация) с настройкой экрана и TopNavigation.Внутри TopNavigation у меня есть динамическая вкладка с 1 экраном (несколько вкладок с 1 экраном).Проблема в том, что MainComponent.js будет получать результаты на componentWillReceiveProps(), а как отправить или обновить данные с nextProps на мою конкретную динамическую вкладку?Или, может быть, мой код неверен?

Вы можете видеть мое изображение, мою множественную вкладку с 1 экраном и иметь 1 кнопку для извлечения данных.А это мой код:

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
//Redux
import {applyMiddleware, createStore} from 'redux';
import {Provider} from 'react-redux';
//reducers
import allReducers from './App/reducers';
import MainContainer from './App/Containers/MainContainer';
//Redux saga
import createSagaMiddleware from 'redux-saga';
import rootSaga from './App/sagas/rootSaga';

const sagaMiddleware = createSagaMiddleware();

let store = createStore(allReducers, applyMiddleware(sagaMiddleware));

const Main = () => (
    <Provider store={store}>
        <MainContainer />
    </Provider>
);
sagaMiddleware.run(rootSaga);
AppRegistry.registerComponent(appName, () => Main);

MainContainer.js

import {connect} from 'react-redux';
import MainComponent from '../Components/MainComponent';
import {fetchCategoriesAction} from '../actions/categoriesAction';
import {fetchTestAction} from "../actions/testAction";

const mapStateToProps = (state) => {
    return {
        receivedCategories: state.categoriesReducer,
        receivedMovies: state.testingReducer,
        navigation: state.navigation
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        onFetchCategories: (payload) => {
            console.log("mapDispatchToProps");
            dispatch(fetchCategoriesAction(payload));
        },
        onFetchTest: (payload) => {
            dispatch(fetchTestAction(payload))
        }
    };
};
const MainContainer = connect(mapStateToProps, mapDispatchToProps)(MainComponent);
export default MainContainer;

MainComponent.js

import React, {Component} from "react";
import {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation'
import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
import {tabBarOptions} from "../Navigation/Top/Options";
import Test from "./Screens/Test";
import Setting from "./Screens/Setting";

export default class MainComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {myNavigator: null, movies: [], categories: []}
    }

    componentWillMount() {
        this.props.onFetchCategories({p1: 1});
    }

    createNavigator(categories) {
        if (categories != null) {
            const screens = {};
            categories.forEach(page => {
                screens[page.slug] = {
                    screen: Test,
                };
            });

            let TopNavigator = createMaterialTopTabNavigator(screens, {
                tabBarOptions,
                lazy: true,
            });

            const AppNavigator = createMaterialBottomTabNavigator({
                B1: TopNavigator,
                B2: Setting,
            });
            const AppContainer = createAppContainer(AppNavigator);
            this.setState({myNavigator: <AppContainer screenProps={this.props}/>});
        }
    }


    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        if (nextProps.receivedCategories !== null && nextProps.receivedCategories.categories !== this.state.categories) {
            this.setState({categories: nextProps.receivedCategories.categories});
            this.createNavigator(nextProps.receivedCategories.categories)
        }
    }

    render() {
        return this.state.myNavigator;
    }

}

Test.js

import React, {Component} from "react";
import {Text, Container, Button} from 'native-base'
export default class Test extends Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <Container>
                <Button onPress={ () => {
                    this.props.screenProps.onFetchTest({slug: this.props.navigation.state.routeName})
                }}><Text>Fetch Data</Text></Button>
                <Text>Test screen {this.props.navigation.state.routeName}</Text>
                <Text>I want this part changed when i click fetch data button</Text>
            </Container>
        )
    }
}

Спасибо!