react-native navigator

//代码

<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>
    ); 
  },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容