react-navigation 实战

npm install --save react-navigation

1.测试TabNavigator、StackNavigator和DrawerNavigator

（1）新建HomeScreen.js

/**
 * 主页面
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Image,
} from 'react-native';

// 引入 导航组件
import {
    StackNavigator,
    TabNavigator,
    TabBarBottom,
} from 'react-navigation';

// TabBar 子组件
import TabBarItem from './TabBarItem';

// 引入 其他组件
import MainScreen from './MainPage';
import MineScreen from './MinePage';
import ChatScreen from './ChatScreen';

export default class HomeScreen extends Component {
    // 渲染页面
    render() {
        return (
            <Navigator />
        )
    }
}

/**
 * TabNavigator Tab选项卡
 * TabNavigator(RouteConfigs, TabNavigatorConfig)
 * 参数1：表示各个页面路由配置
 * 参数2：tab属性配置
 */
// 注册tabs (底部选项卡)
const Tab = TabNavigator(
    {
        Main:{
            screen:MainScreen, // 对应界面名称，可以在其他页面通过这个screen传值和跳转。
            navigationOptions:({navigation}) => ({ // 配置TabNavigator的一些属性
                tabBarLabel:'首页', // 设置标签栏的title
                tabBarIcon:({focused,tintColor}) => ( // 设置标签栏的图标。需要给每个都设置
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./image/home.png')}
                        selectedImage={require('./image/home.png')}
                    />
                )
            }),
        },  

        Mine:{
            screen:MineScreen,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'我的',
                tabBarIcon:({focused,tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./image/mine.png')}
                        selectedImage={require('./image/mine.png')}
                    />
                )
            }),
        },
    },
    {
        tabBarComponent:TabBarBottom, // 导航器 组件
        tabBarPosition:'bottom', // 显示在底端，android 默认是显示在页面顶端的
        swipeEnabled:false, // 禁止左右滑动
        animationEnabled:false, // 切换页面时不显示动画
        lazy:true, // 懒加载
        tabBarOptions:{
            activeTintColor:'#06c1ae', // 文字和图片选中颜色
            inactiveTintColor:'#979797', // 文字和图片默认颜色
            indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
            style:{
                backgroundColor:'#ffffff', // TabBar 背景色
            },
            labelStyle: {
                fontSize: 12, // 文字大小
            },
        }
    }
); 

/**
 * 注册导航
 */
const Navigator = StackNavigator(
    {
        Tab:{screen:Tab},
        Chat:{screen:ChatScreen},
    },
    {
        initialRouteName:'Tab', // 默认显示页面
        navigationOptions:{
            // header:null, // 可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
            headerBackTitle: null, // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。
            headerTitleStyle: {fontSize:18, color:'#666666',alignSelf:'center'}, // 设置alignSelf:'center' 文字居中
            headerStyle: {height:48, backgroundColor:'#00BFFF'},
        },
        mode:'card', // 使用iOS和安卓默认的风格
    }
);

（2）新建MainPage.js

/**
 * 首页
 */
import React, { Component } from 'react';
import {
  Button,
  Image,
  View,
  Text,
  StyleSheet,
} from 'react-native';

export default class MainPage extends Component {
  static navigationOptions = {
    title:'首页', // 顶部标题

  };

  render() {
    const {navigate} = this.props.navigation;
    return(
      <View style={styles.container}>
        <Text onPress={() =>{
          navigate('Chat',{user:'Sybil'})
        }}>点击跳转到'聊天页面'</Text>
      </View>
    );
  }  

  _skip() {
    /**
     * 页面跳转并传值
     * 参数1：页面名称
     * 参数2：传的值
     * <Text onPress={this._skip.bind(this)}>点击跳转到'我的页面'</Text>
     */
    // this.props.navigation.navigate('Chat',{user:'Sybil'});
  }
}

// 层叠样式表
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

（3）新建MinePage.js

/**
 * 我的
 */
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: '我的',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./image/chat.png')}
        style={[styles.tabIcon, {tintColor: tintColor}]}
      />
    ),
  };

  // 组件加载完成
  componentDidMount() {
    // 获取传值 {this.props.navigation.state.params.info}
    // const {params} = this.props.navigation.state;
    // const user = params.user;
    // alert(user);
  }

  render(){;
    return(
      <View style={styles.container}>
        <Text style={{padding:20}}>Sybil</Text>
        <Button
          style={{padding:20}}
          onPress={() => this.props.navigation.navigate('DrawerOpen')}
          title="点击打开侧滑菜单"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#fff',
  },
  tabIcon: {
    width: 16,
    height: 16,
  },
});

/**
 * 注册抽屉 (侧滑菜单)
 * DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
 * 参数1：抽屉包含的子组件
 * 参数2：抽屉的样式
 */
const MyDrawerNavigator = DrawerNavigator(
  {
    Mine: {
      screen: MinePage,
    },
    Notifications: {
      screen: MyNotificationsScreen,
    },
  },
  {
    drawerWidth: 200, // 抽屉宽
    drawerPosition: 'left', // 抽屉在左边还是右边
    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件
    contentOptions: {
      initialRouteName: MinePage, // 默认页面组件
      activeTintColor: '#008AC9',  // 选中文字颜色
      activeBackgroundColor: '#f5f5f5', // 选中背景颜色
      inactiveTintColor: '#000',  // 未选中文字颜色
      inactiveBackgroundColor: '#fff', // 未选中背景颜色
      style: {  // 样式

      }
    }
  }
);

// 默认向外暴露 '我的抽屉' 组件
export default MyDrawerNavigator;

（4）编写TabBarItem.js

/**
 * TabBarItem 组件
 */
import React,{Component} from 'react';
import {Image} from 'react-native';  

export default class TabBarItem extends Component {
    render() {
        return(
            <Image
                source={this.props.focused ? this.props.selectedImage : this.props.normalImage}
                style={{tintColor:this.props.tintColor,width:25,height:25 }}
            />
        )
    }
}

（5）编写ChatScreen.js

/**
 * 聊天页
 */
import React, { Component } from 'react';
import {
    Button,
    Image,
    View,
    Text
} from 'react-native';

export default class ChatScreen extends 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>

        );
    }
}

（6）编写MyNotificationsScreen.js

/**
 * 侧滑菜单
 * 通知页
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Image
} from 'react-native';

// 定义 通知组件
export default class MyNotificationsScreen extends Component {
    // 定义抽屉子组件样式
    static navigationOptions = {
        title:'通知',
        drawerLabel: '通知',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./image/notif.png')}
                style={[styles.tabIcon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
             <View style={styles.container}>
                <Button
                    style={{padding:20}}
                    onPress={() => this.props.navigation.navigate('DrawerOpen')}
                    title="点击打开侧滑菜单"
                />
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="返回我的界面"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#fff',
    },
    tabIcon: {
        width: 16,
        height: 16,
    },
});

效果图