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