Правильный способ интеграции RNNv2 в React Redux - PullRequest
Новая
       27

Правильный способ интеграции RNNv2 в React Redux

0 голосов
/ 25 марта 2019

Я не знаю точно, как интегрировать мои коды в RNNv2. Моя проблема в моем приложении заключается в том, что я не могу отобразить свои данные FlatList в другой компонент (экран).

Я попробовал свои коды в RNNv1, и он работает правильно. Поэтому я думаю, что проблема заключается в интеграции в RNNv2 с React Redux.

Я хочу знать, как точно зарегистрировать мои экраны, а также мои основные вкладки (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 основные вкладки): 

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