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

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 с помощью реквизита?


react-native react-native-navigation react-native-tab-view wix-react-native-navigation
person Santanu Karar    schedule 05.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я могу передать 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}
                />

        );
    }
person Santanu Karar    schedule 05.05.2020

arrow_upward
0
arrow_downward

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

Вместо этого вы хотите зарегистрировать компонент / экран, который содержит react-native-tab-view и имеет компоненты / экраны, которые вы хотите использовать как 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}
  />
)
person Jin Shin    schedule 26.05.2020
comment
Спасибо! Я вижу, что это еще один способ реализации. Я был бы рад услышать, что вы думаете об этом преимуществе перед другими. - person Santanu Karar; 27.05.2020
comment
Хм, если я правильно понимаю ваш вопрос, вы пытаетесь использовать зарегистрированный компонент RNN в качестве одной из вкладок в react-native-tab-view. Вы не должны регистрировать экраны, которые вы собираетесь использовать, в качестве одной из вкладок (например, EventsScreen), поскольку response-native-tab-view ожидает нормальный компонент React. - person Jin Shin; 27.05.2020
comment
Поскольку вы упомянули, я заметил, что в моем исходном решении я фактически использую EventsScreen напрямую, а не RNN-способом! Итак, теперь, если я удалил регистрацию RNN для EventsScreen, мое приложение все еще работало нормально! После изменения наши коды, я думаю, примерно такие же) Спасибо! - person Santanu Karar; 27.05.2020