react-navigation使用及dva初探一

在react-navigation推出之前，项目一直是用的navigator作为路由，在ios上跑的还是比较顺利，但是在android上却显得非常卡顿，虽然做了诸多优化，也还是不能达到类似原生的流畅，在学习react-navigation途中遇到的问题，及常见操作给各位作个分享，帮助初来乍到的rn学者更快使用，文档点这里，目前貌似只有英文文档，
接下来，我们可以快速的构建自己的导航框架了，首先是添加依赖
yarn add react-navigation
或者
npm install –save react-navigation
接下来在我们的统一的入口组件，如app.js，代码如下:

import {
    StackNavigator,
    TabNavigator,
} from 'react-navigation'
const HomeNavigator = TabNavigator(
    {
        Home: {screen: Home},
        Classify: {screen: Classify},
        Shopcar: {screen: Shopcar},
        Mine: {screen: Mine},
    },
    {
        tabBarComponent: TabView.TabBarBottom,
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazyLoad: true,
        tabBarOptions: {
            activeTintColor: '#e91e63',
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 12,
            },
        }
    },
)

const AppNavigator = StackNavigator(
    {
        Main: {screen: HomeNavigator},
        Login: {screen: Login},
    },
    {
        headerMode: 'screen',  //Only works when headerMode is screen
        mode: 'card',//定义渲染和转换的样式 card 使用标准的iOS和Android屏幕转换。这是默认值。 modal使屏幕从底部滑入，这是普通的iOS模式。只适用于iOS，对Android无影响。

        navigationOptions: {
            cardStack: {
                gesturesEnabled: false, //是否可以使用手势关闭此屏幕。在iOS上默认为true，在Android上为false
            },
        },
    },
);

export default class Main extends Component {
    render() {
        return (
                    <AppNavgator/> );
    }
}

我们首先来看下运行效果：

基本可以实现app的导航需求，接下来我们看提供的属性
先看TabNavigator的属性，
tabBarComponent 有两种可以选择，分别是TabView.TabBarTop 和TabView.TabBarBottom ，需要知道的是android默认是第一种，ios默认是第二种，如果需要统一，需要设置，
tabBarPosition //是导航条的位置，’top’ 或者 ‘bottom’
swipeEnabled: false, //是否支持滑动
animationEnabled: false, //导航切换是否附带动画
lazyLoad: true, //是否需要懒加载
tabBarOptions: {
activeTintColor: ‘#e91e63’, //点击时的颜色
inactiveTintColor: ‘gray’, //未被点击的颜色
labelStyle: {
fontSize: 12, // 字体大小
},
最后再加到StackNavigator即可，StackNavigator的属性上面都有注释，很好理解，需要注意的是新加的页面都需要再StackNavigator里声明，接下来看跳转及传参：

this.props.navigation.navigate('yourScreen', { params:  yourparams })

接收参数：

this.props.navigation.state.params.params

接下来看下标签栏的属性：

 static navigationOptions = {
        header: {
            style: {backgroundColor: '#E43F47'},  //标签栏样式
            title: '我的',  //标签栏文字，返回一个字符串
            tintColor: 'white'  //文字颜色
        },
        tabBar: {        //导航栏配置
            label: '我的',   
            icon: ({focused, tintColor}) => (
                <Image
                    style={[styles.icon,{tintColor: tintColor}]}
                    source={require('../../img/main/navigator/mime_nomal.png')}
                />
            ),
        },
    }

基本功能大致实现，如想实现更多个性或自定义效果，请看下篇介绍