react-native navigator

2016-10-15  本文已影响29人  剌小胥

//代码

<Navigator
        style={styles.appContainer}
        initialRoute={{name:'app', component: App, title: ''}}
        configureScene={(route) => {
            return Navigator.SceneConfigs.FloatFromRight
        }}
        renderScene={(route, navigator) => {
            let Component = route.component
            return <Component {...route.params} route={route} navigator={navigator} />
        }}
        navigationBar={
          <Navigator.NavigationBar 
            routeMapper={ NavigationBarRouteMapper} 
            style={styles.navBar}
          />
        }
      >
      </Navigator>

var NavigationBarRouteMapper = {
  LeftButton: (route, navigator, index, navState) => { 
    if (index === 0) {
      return null;
    } else {
      return (
        <TouchableOpacity onPress={() => navigator.pop()}>
          <View style={styles.leftButtonIcon}>
            <Icon.BackIcon/><Text style={{color:'#FFFFFF',width:52,fontSize:14}}>返回</Text>
          </View>
        </TouchableOpacity>
      );
    }
  },
  RightButton: (route, navigator, index, navState) => {
    if (index === 0) {
      return null;
    } else {
      return (
        <TouchableOpacity onPress={() => route.rightButton && route.rightButton.clicked()}>
          <View style={styles.rightButtonIcon}>
            <Icon.MorePostIcon/>
            <Text style={{color:'#FFFFFF',fontSize:14}}>
              {route.rightButton && route.rightButton.title}
            </Text>
          </View>
        </TouchableOpacity>
      ); 
    }
  },
  Title: (route, navigator, index, navState) => { 
    return (
      <View style={styles.navContainer}>
        <Text style={styles.navContainerTitle}>{route.title}</Text>
      </View>
    ); 
  },
}
上一篇 下一篇

猜你喜欢

热点阅读