react-native - 如何在 react-native 中使用 navigator 组件显示导航栏

Question

大家好，我正在尝试使用 navigator 组件代替 navigatorIOS，但是问题是 navigator 没有显示在 View 中，下面是我的 navigator 和 navigatorIOS

代码

NavigatorIOS:

<NavigatorIOS
     style={styles.navigator}
     barTintColor='#37475e'
     titleTextColor='white'
     initialRoute={{
     title:' Words',
     component:Main
}}/>

使用 navigatorIOS 我可以查看 navbar 但使用 navigator 组件 我遇到问题 我想使用 navigator 组件而不是 navigatorIOS

导航器组件:

<Navigator
        style={styles.navigator}
        TintColor='#37475e'
        titleTextColor='white'
        initialRoute={{
          title:'Words',
          component:Main
        }}
        renderScene={(route, navigator) =>{
          return <route.component navigator={navigator} {...route.passProps} />;
}}/>

任何人都可以给我建议如何解决这个任何帮助非常感谢

Answer 1

是的，您需要创建一个 <Navigator.NavigationBar /> ，并将其作为 Prop 传递给 Navigator :

class App extends React.Component {
  render() {
      return (
        <Navigator
          style={{flex:1}}
          initialRoute={{name: 'Main', component: Main, index: 0}}
          renderScene={(route, navigator) =>    {
            if (route.component) {
              return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
             }
          }}
          navigationBar={ <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} /> } 
       />
    )
  }
}

然后您需要创建一个 routeMapper 对象，您将其作为 prop 传递给 Navigator.NavigationBar :

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
      <TouchableHighlight style={{marginTop: 10}} onPress={() => {
            if (index > 0) {
              navigator.pop();
            } 
        }}>
       <Text>Back</Text>
     </TouchableHighlight>
   )} else {
   return null}
   },
   RightButton(route, navigator, index, navState) {
      return null;
   },
   Title(route, navigator, index, navState) {
      return <Text>Hello From My App!</Text>
   }
};

在他们的 GitHub 中的 UI Explorer 中有一个很好的示例，请查看 here .