react-navigation示例

react-navigation示例

什么react-navigation (官网:https://reactnavigation.org/docs/intro/)

• 在react-navigation出来之前,页面跳转最多使用的是navigator,然而navigator最大的缺点就是卡顿!卡顿!卡顿!以至于你不得不配合runAfterInteractions使用,即先让页面跳转动画执行完毕,再执行页面中的逻辑,这样效率显然大大降低!
• 前一段时间开始推荐使用react-navigation，并且在0.44发布的时将之前一直存在的Navigator废弃了
• react-navigation功能强大,包括StackNavigator,TabNavigator和DrawerNavigator

一个 StackNavigator + DrawNavigator +TabNavigator 传参Demo

• 使用前请先下载:

npm install --save react-navigation

• router路由页

import {StackNavigator} from "react-navigation";import MainPage from './mainPage';import DetailPagDe from './views/details/detailPage'const routers = StackNavigator({    Main: {        screen: MainPage,    },    Detail: {        screen: DetailPagDe,    },});module.exports = routers;

• main容器页(承载了home,order,mine等三个tab页)

import React, {Component} from 'react';import {    StyleSheet,    Image,    Style} from 'react-native';import {TabNavigator} from "react-navigation";import HomePage from './views/HomePage';import OderPage from './views/OderPage';import MinePage from './views/MinePage';const mainPage = TabNavigator({    Home: {        screen: HomePage,        navigationOptions: {            //默认参数        }    },    Oder: {        screen: OderPage,        navigationOptions: {        }    },    Mine: {        screen: MinePage,        //以下参数也可放置在MinePage.js页面        navigationOptions: {            title: '我的',            tabBarLabel: '我的',            tabBarIcon: ({ tintColor }) => (                <Image                    source={                        require('./images/cert0.png')                    }                    style={[styles.icon,{tintColor: tintColor}]}// {tintColor: tintColor} 选中的图片和文字颜色                />            ),            headerTitleStyle: {                alignSelf:'center'            }        }    },}, {    animationEnabled: true, // 切换页面时不显示动画    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的    swipeEnabled: true, // 禁止左右滑动    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转    tabBarOptions: {        activeTintColor: '#0F9C00', // 文字和图片选中颜色        inactiveTintColor: '#999', // 文字和图片默认颜色        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？        style: {            backgroundColor: '#444', // TabBar 背景色            height:50        },        labelStyle: {            fontSize: 12, // 文字大小,            marginTop: 0,        },    },});const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',    },    icon:{        width:20,        height:20    }});module.exports = mainPage;

• home页

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Button,    TouchableOpacity} from 'react-native';import DrawPage from './DrawPage'export default class HomePage extends Component {    static navigationOptions = {        title: '首页',        tabBarLabel: '首页',        tabBarIcon: ({ tintColor }) => (            <Image                source={                    require('../images/cert0.png')                    }                style={[styles.icon,{tintColor: tintColor}]}// {tintColor: tintColor} 选中的图片和文字颜色            />        ),        headerTitleStyle: {         alignSelf:'center'        },    };    render() {        return(            <DrawPage/>        )    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',    },    icon:{        width:20,        height:20    }});

*order页

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Button} from 'react-native';import { NavigationActions } from 'react-navigation'export default class OderPage extends Component {    static navigationOptions = {        title: '订单',        tabBarLabel: '订单',        tabBarIcon: ({ tintColor }) => (            <Image                source={require('../images/cert0.png')}                style={[styles.icon,{tintColor: tintColor} ]}            />        ),    };    goToDetail() {        const {dispatch} = this.props.navigation;        const resetAction = NavigationActions.reset({            index: 0,//指定显示数组内的路由            actions: [                NavigationActions.navigate({ routeName: 'Detail',params:{user: 'xiongtm'}}),                //NavigationActions.navigate({ routeName: 'others',params:{user: 'xiongtm'}}),            ]        });        dispatch(resetAction);    }    render() {        return (            <View style={styles.container}>                <Button                    onPress={() => this.goToDetail()}                    title="跳转+传参+清空路由"                />            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',    },    icon:{        width:20,        height:20    }});

*mine页

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image} from 'react-native';export default class MinePage extends Component {    render() {        return (            <View style={styles.container}>                <Text>我的</Text>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',    },    icon:{        width:20,        height:20    }});

• 抽屉页

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    Button,    ScrollView} from 'react-native';import {DrawerNavigator, DrawerItems} from 'react-navigation';class MyHomeScreen extends Component {    // static navigationOptions = {    //     drawerLabel: 'Home',    //     drawerIcon: ({tintColor}) => (    //         <Image    //             source={require('../images/cert0.png')}    //             style={[styles.icon, {tintColor: tintColor}]}    //         />    //     ),    //    // };    render() {        return (            <View style={styles.container}>                <Button                    onPress={() => this.props.navigation.navigate('Notifications')}                    title="Go to notifications"                />                <Button                    onPress={() => this.props.navigation.navigate('DrawerOpen')}                    title="DrawerOpen"                />                <Button                    onPress={() => this.props.navigation.navigate('DrawerClose')}                    title="DrawerClose"                />            </View>        );    }}class MyNotificationsScreen extends Component {    // static navigationOptions = {    //     drawerLabel: 'Notifications',    //     drawerIcon: ({tintColor}) => (    //         <Image    //             source={require('../images/cert0.png')}    //             style={[styles.icon, {tintColor: tintColor}]}    //         />    //     ),    //    // };    render() {        return (            <View style={styles.container}>                <Button                    onPress={() => this.props.navigation.navigate('Home')}                    title="Go back home"                />            </View>        );    }}const CustomDrawerContentComponent = (props) => (    <ScrollView>        {/*<DrawerItems {...props} />*/}        <View>            <Text>46645646546</Text>        </View>    </ScrollView>);const MyDraw = DrawerNavigator({        Home: {            screen: MyHomeScreen,        },        Notifications: {            screen: MyNotificationsScreen,        },    },    {        //drawerWidth: 200, // 抽屉宽        drawerPosition: 'left', // 抽屉在左边还是右边        contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件        // contentOptions: {        //     initialRouteName: MyHomeScreen, // 默认页面组件        //     activeTintColor: 'white',  // 选中文字颜色        //     activeBackgroundColor: '#ff8500', // 选中背景颜色        //     inactiveTintColor: '#666',  // 未选中文字颜色        //     inactiveBackgroundColor: '#fff', // 未选中背景颜色        //     style: {  // 样式        //        //     }        // }    });module.exports = MyDraw;const styles = StyleSheet.create({    icon: {        width: 24,        height: 24,    },    container:{justifyContent: 'center', alignItems: 'center', flex: 1}});

• 项目地址:
  https://github.com/tmxiong/react-navigation
• 博客参考:
  http://blog.csdn.net/sinat_17775997/article/details/70176688
  http://www.jianshu.com/p/2f575cc35780