Использование response-native-tab-view в react-native-navigation

Question

react: "16.11.0",
react-native: "0.62.2",
react-native-navigation: "^6.4.0",
react-native-tab-view: "^2.14.0",

Я пытаюсь использовать response-native-tab-view с react-native-navigation V3.

Пока что могу используйте зарегистрированный компонент следующим образом:

import EventsScreen from './EventsScreen';
function registerScreens() 
{
    ...
    Navigation.registerComponent('com.events.EventsScreen', () => gestureHandlerRootHOC(EventsScreen));
    ...
}

На странице React.Component, где я хочу видеть вкладку:

import EventsScreen from './EventsScreen';

let renderScene = SceneMap({
    first: EventsScreen,
    second: AddEventScreen   });

Вышеупомянутый способ работает, но я не могу передать любые реквизиты в EventsScreen. Скорее всего, я ожидал, что дизайн будет примерно таким:

{
   component: 'com.events.EventsScreen',
   passProps: { .. }
}

Следующее не сработает, если я попробую таким образом:

let renderScene = SceneMap({
        first: 'com.events.EventsScreen',
        second: 'com.events.AddEventScreen'   });

Какой правильный способ предоставить React.Component вид на SceneMap с реквизитом?

Answer 1

Похоже, вы пытаетесь использовать экраны, зарегистрированные в RNN, как один из tabs в react-native-tab-view.

Вместо этого вы хотите зарегистрировать компонент / экран, который содержит react-native-tab-view и имеет компоненты / экраны, которые вы sh должны использовать как tabs как обычный компонент реакции (не регистрируйте их с помощью RNN).

В итоге вы получите что-то вроде этого:

// index.js
import Home from './route/Home

Navigation.registerComponent('Home', () => Home)

// Home.js
import { TabView, SceneMap } from 'react-native-tab-view'
import EventScreen from './route/Home/tabs/EventScreen'

const renderScene = () => {
  return SceneMap({
    eventScreen: () => <EventScreen {...eventScreenProps} />
  })
}

return (
  <TabView
    renderScene={renderScene}
    {...others}
  />
)

Answer 2

Я могу передать props в свойство renderScene следующим образом:

renderScene = ({ route }) => {
      switch (route.key) {
        case 'first':
          return <EventsScreen {...this.props}/>;
        case 'second':
          return <SecondRoute />;
        default:
          return null;
      }
    };

    render()
    {
        return (
                <TabView
                    onIndexChange={this._handleIndexChange}
                    navigationState={this.state}
                    renderScene={this.renderScene}
                    initialLayout={initialLayout}
                    style={styles.container}
                />

        );
    }