特定选项卡上的React Navigation更新屏幕

Question

我是本机上的新手。我可以通过“设置”屏幕和TopNavigation进行导航（底部导航）。 在TopNavigation内部，我有1个屏幕的动态标签（1个屏幕的多个标签）。问题是，componentWillReceiveProps()将在nextProps处接收结果，以及如何将数据从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); 发送或更新到我的特定动态标签？还是我的代码使用错误的方式？

您可以看到我的图像，带有1个屏幕的多个选项卡，并具有1个按钮来获取数据。这是我的代码：

  

index.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;

     

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

}

     

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

     

Test.js

my_params.py

谢谢！