在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'   });

为SceneMap提供带有道具的React.Component视图的正确方式是什么？

Answer 1

我可以这样将道具传递给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}
                />

        );
    }

Answer 2

因此，您似乎正在尝试使用注册到RNN的屏幕作为react-native-tab-view中的tabs之一。

相反，你想做的是注册一个包含react-native-tab-view的组件/屏幕，并且有你想要用作tabs的组件/屏幕作为普通的react组件(不要向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}
  />
)