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

Question

Hi every one I am trying to use navigator component in place of navigatorIOS , but what the problem navigator is not showing in view, below is my code for navigator and navigatorIOS

NavigatorIOS:

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

using navigatorIOS I can view the navbar but using using navigator Component I am facing problem I want to use navigator component instead of navigatorIOS

Navigator Component:

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

Can any one give me suggestions for how to solve this any help much appreciated

Answer 1

Yes, you need to create a <Navigator.NavigationBar /> , and pass it in as a prop to the 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} /> } 
       />
    )
  }
}

You then need to create a routeMapper object, which you pass in as a prop to the 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>
   }
};

There is a great example in the UI Explorer in their GitHub, check it out here .

Answer 2

App.js

<Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'Main',
                        title: 'Words'
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />

This code for left, right and title on navigationBar in react-native

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Page1':
            case 'Page2':
            case 'Page3':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return null
        }
    },
    RightButton(route, navigator, index, navState) {
      switch (route.id) {
          case 'Page1':
            return (
            <TouchableOpacity
                style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                <Icon name={'map'} size={25} color={'white'} />
            </TouchableOpacity>
            )
            case 'Page2':
              return (
              <TouchableOpacity
                  style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                  <Icon name={'map'} size={25} color={'white'} />
              </TouchableOpacity>
              )
            case 'Page3':
              return (
                <TouchableOpacity
                    style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                    <Icon name={'tab'} size={25} color={'white'} />
                </TouchableOpacity>
                )

            default:
              return null
          }
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

route.onPress(): method to call right button click.

route.title: set title of page.

For reference, use following link: Navigator