在react-native导航中使用react-native-tab-view

Question

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

我正在尝试将react-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

我能够通过这种方式将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}
                />

        );
    }