将RNNv2集成到React Redux的正确方法

时间:2019-03-25 13:08:17

标签: reactjs react-native redux react-redux react-native-navigation-v2

我不确定如何将我的代码集成到RNNv2中。我的应用程序中的问题是我无法将FlatList的数据显示到另一个组件(屏幕)中。

我将代码尝试到RNNv1中,并且可以正常工作。因此,我认为问题在于将RNNv2与React Redux集成在一起。

我想知道如何准确地注册屏幕以及mainTabs(startTabBasedApp)

这是我的代码:

App.js

import {Navigation} from 'react-native-navigation';
import React, {Component} from 'react';

//Screens
import AuthScreen from './src/screens/Auth/Auth';
import EventMap from './src/screens/Map/Map';
import EventCreator from './src/screens/EventCreator/EventCreator';
import EventHome from './src/screens/Home/Home';
import EventPushScreen from './src/screens/EventPushScreen/EventPushSc';

//Redux
import { Provider } from 'react-redux';

import configureStore from './src/store/configureStore';

const store = configureStore();

//Register Screens
// I did not pass the Redux and store in EventMap and AuthScreen because
// it does not use Redux yet.
Navigation.registerComponentWithRedux("Event.AuthScreen", () => AuthScreen);
Navigation.registerComponentWithRedux("Event.Map", () => EventMap);
Navigation.registerComponentWithRedux("EventCreator", () => EventCreator, Provider, store);
Navigation.registerComponentWithRedux("EventHome", () => EventHome, Provider, store);

//Start A App
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            name: "Event.AuthScreen",
          }
        }],
        options: {
          topBar: {
            title: {
              text: 'Welcome',
              alignment: 'center'
            }
          }
        }
      }
    }
  });
});

startMainTabs.js(我的3个mainTabs):

import {Navigation} from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import React from 'react';

const startTabs = () => {
  Promise.all([
     Icon.getImageSource("ios-home", 30),
     Icon.getImageSource("ios-map", 30),
     Icon.getImageSource("ios-share-alt", 30)
   ]).then(sources => {
    Navigation.setRoot({
      root: {
        bottomTabs: {
           children: [{
             stack: {
               children: [{
                 component: {
                   name: "Event.Map",
                }
              }],
              options: {
                bottomTab: {
                  icon: sources[1],
                  testID: 'FIRST_TAB_BAR_BUTTON',
                }
              }
            }
          },
          {
             stack: {
              // id: "EventHomeStack",
              children: [{
                component: {
                  name: "EventHome"
                }
              }],
              options: {
                bottomTab: {
                  icon: sources[0],
                  testID: 'SECOND_TAB_BAR_BUTTON'
                }
              }
            }
          },
          {
             stack: {
               children: [{
                 component: {
                  name: "EventCreator"
                }
               }],
              options: {
                bottomTab: {
                  icon: sources[2],
                  testID: 'THIRD_TAB_BAR_BUTTON'
                }
              }
            }
          }]
        }
      }
    });
  });
};

index.js:

import React from 'react';
import {AppRegistry} from 'react-native';

//Redux
import { Provider } from 'react-redux';
import App from './App';
import {name as appName} from './app.json';

import configureStore from './src/store/configureStore';

const store = configureStore();

const RNRedux = () => (
  <Provider store={store}>
    <App />
  </Provider>
);


 AppRegistry.registerComponent(appName, () => RNRedux);

0 个答案:

没有答案