官方推荐react-navigation的具体使用详解

react-native init ComponentDemo

npm install --save react-navigation

import React from 'react';import {  StyleSheet,  View,  Text,  Button,  Image} from 'react-native';import {  StackNavigator,  TabNavigator} from 'react-navigation';import ChatScreen from './ChatScreen';import MinePage from './MinePage';class HomePage extends React.Component{  static navigationOptions={    title: '首页',//设置标题内容    header:{      backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）    }  }  constructor(props) {    super(props);  }  render() {    const {navigate} = this.props.navigation;    return (      <View style={styles.container}>        <Text style={{padding:10}}>Hello, Navigation!</Text>        <Button          onPress={() => navigate('Chat',{user:'Sybil'})}          title="点击跳转"/>      </View>    )  }}const MainScreenNavigator = TabNavigator({  Home: {    screen: HomePage,    navigationOptions: {      tabBar: {        label: '首页',        icon: ({tintColor}) => (          <Image            source={require('./image/bar_home_nomarl@3x.png')}            style={[{tintColor: tintColor},styles.icon]}          />        ),      },    }  },  Certificate: {    screen: MinePage,    navigationOptions: {      tabBar: {        label: '我的',        icon: ({tintColor}) => (          <Image            source={require('./image/bar_center_normal@3x.png')}            style={[{tintColor: tintColor},styles.icon]}          />        ),      },    }  },}, {  animationEnabled: false, // 切换页面时不显示动画  tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的  swipeEnabled: false, // 禁止左右滑动  backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转  tabBarOptions: {    activeTintColor: '#008AC9', // 文字和图片选中颜色    inactiveTintColor: '#999', // 文字和图片默认颜色    showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示    indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了    style: {      backgroundColor: '#fff', // TabBar 背景色    },    labelStyle: {      fontSize: 12, // 文字大小    },  },});const styles = StyleSheet.create({  container:{    flex: 1,    backgroundColor:'#fff'  },  icon: {    height: 22,    width: 22,    resizeMode: 'contain'  }});const SimpleApp = StackNavigator({  Home: {screen: MainScreenNavigator},  Chat:{screen:ChatScreen},});export default SimpleApp;

import React from 'react';import {  Button,  Image,  View,  Text} from 'react-native';class ChatScreen extends React.Component {  static navigationOptions = {    title:'聊天',  };  render() {    const {params} = this.props.navigation.state;    return (    <View style={{backgroundColor:'#fff',flex:1}}>      <Text style={{padding:20}}>Chat with {params.user}</Text>    </View>    );  }}export default ChatScreen;

import React,{Component} from 'react';import {  Button,  Image,  View,  Text,  StyleSheet} from 'react-native';import {  DrawerNavigator} from 'react-navigation';import MyNotificationsScreen from './MyNotificationsScreen';class MinePage extends Component{  static navigationOptions = {     title:'我的',     drawerLabel: '我的',    // Note: By default the icon is only shown on iOS. Search the showIcon option below.     drawerIcon: ({ tintColor }) => (     <Image       source={require('./image/chat@3x.png')}      style={[styles.icon, {tintColor: tintColor}]}     />   ),  };  render(){;    return(      <View style={{backgroundColor:'#fff',flex:1}}>        <Text style={{padding:20}}>Sybil</Text>        <Button         style={{padding:20}}         onPress={() => this.props.navigation.navigate('DrawerOpen')}         title="点击打开侧滑菜单"        />      </View>    );  }}const styles = StyleSheet.create({  icon: {    width: 24,    height: 24,  },});const MyChatNavigator = DrawerNavigator({  MyChat: {    screen: MinePage,  },  Notifications: {    screen: MyNotificationsScreen,  },},{  drawerWidth: 220, // 抽屉宽  drawerPosition: 'left', // 抽屉在左边还是右边  // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件  contentOptions: {    initialRouteName: MinePage, // 默认页面组件    activeTintColor: '#008AC9', // 选中文字颜色    activeBackgroundColor: '#f5f5f5', // 选中背景颜色    inactiveTintColor: '#000', // 未选中文字颜色    inactiveBackgroundColor: '#fff', // 未选中背景颜色    style: { // 样式    }  }});export default MyChatNavigator;

import React from 'react';import {  StyleSheet,  View,  Text,  Button,  Image} from 'react-native';class MyNotificationsScreen extends React.Component {  static navigationOptions = {    title:'通知',    drawerLabel: '通知',    drawerIcon: ({ tintColor }) => (      <Image        source={require('./image/notif@3x.png')}        style={[styles.tabIcon, {tintColor: tintColor}]}      />    ),  };  render() {    return (       <View style={{backgroundColor:'#fff'}}>        <Button          style={{padding:20}}          onPress={() => this.props.navigation.navigate('DrawerOpen')}          title="点击打开侧滑菜单"        />        <Button          onPress={() => this.props.navigation.goBack()}          title="返回我的界面"        />      </View>    );  }}const styles = StyleSheet.create({  tabIcon: {    width: 24,    height: 24,  },});export default MyNotificationsScreen;