1 
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

4

2 回答 2

0

So it seems like you are trying to use the screens registered with RNN to be used as one of tabs in react-native-tab-view.

What you want to do instead is to register a component/screen which contains react-native-tab-view and have components/screens you wish to use as tabs as normal react component (do not register these with RNN).

You will end up something like this:

// 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}
  />
)
于 2020-05-26T01:06:07.053 回答
0

I able to pass props to renderScene property in this way:

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}
                />

        );
    }
于 2020-05-05T11:12:59.217 回答