React native 特定选项卡上的反应导航更新屏幕

我是新手。我有带设置屏幕和顶部导航的导航（底部导航）。 在TopNavigation中，我有一个动态选项卡和一个屏幕（多个选项卡和一个屏幕）。问题是，

MainComponent.js

将在

componentWillReceiveProps（）

接收结果，以及如何将数据从

nextrops

发送或更新到我的特定动态选项卡？或者我的代码用错了

你可以看到我的图像，我的多个标签和一个屏幕，并有一个按钮来获取数据。这是我的代码：

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);

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

}

import React，{Component}来自“React”；
从“反应导航”导入{createAppContainer，createMaterialTopTabNavigator}
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“./Navigation/Top/Options”导入{tabBarOptions}；
从“/Screens/Test”导入测试；
从“/Screens/Setting”导入设置；
导出默认类MainComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={myNavigator:null，电影：[]，类别：[]
}
组件willmount（）{
this.props.onFetchCategories（{p1:1}）；
}
createNavigator（类别）{
如果（类别！=null）{
常量屏幕={}；
categories.forEach（第=>{
屏幕[第页，slug]={
屏幕：测试，
};
});
让TopNavigator=createMaterialTopTabNavigator（屏幕{
禁忌选项，
懒惰：是的，
});
const AppNavigator=createMaterialBottomTabNavigator({
B1:TopNavigator，
B2：设置，
});
const AppContainer=createAppContainer（AppNavigator）；
此.setState（{myNavigator:

谢谢大家!

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

}

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