react-navigation 实践篇

体验并不会比原生的差，比Navigator 的跳转效果好很多
直接看效果吧

QQ20170621-101731.gif

附上代码 【注】TabBarItem为自定义组件

import  PageFirst from  './PageFirst';
import PageSecond from  './PageSec';
import PageThird from  './PageThir';
import PageFour from  './PageFor';
import TabBarItem from  './TabBarItem';
import {StackNavigator, TabNavigator} from  'react-navigation';
export default class RootScence extends Component {
    render() {
        return (
            <Navigator />
        );
    }
}

const Tab = TabNavigator({
        First: {
            screen: PageFirst,
            navigationOptions: ({navigation})=>({
                tabBarLabel: 'tab1', //设置Tab 标签
                headerTitle: '标题1', //设置导航标题
                // title:'标签'  //同时设置两个标题
                tabBarIcon:({focused,tintColor})=>(
                    <TabBarItem
                        tintColor={tintColor}
                        focused = {focused}
                        normalImage = {require('./tabbar/pfb_tabbar_homepage@2x.png')}
                        selectedImage = {require('./tabbar/pfb_tabbar_homepage_selected@2x.png')}
                    />
                )
            }),
        },
        Second: {
            screen: PageSecond,
            navigationOptions: ({navigation})=>({
                tabBarLabel: 'tab2',
                headerTitle: '标题2',
                tabBarIcon:({focused,tintColor})=>(
                    <TabBarItem
                        tintColor={tintColor}
                        focused = {focused}
                        normalImage = {require('./tabbar/pfb_tabbar_merchant@2x.png')}
                        selectedImage = {require('./tabbar/pfb_tabbar_merchant_selected@2x.png')}

                    />
                )

            }),
        },
        Third: {
            screen: PageThird,
            navigationOptions: ({navigation})=>({
                tabBarLabel: 'tab3',
                headerTitle: '标题3',
                tabBarIcon:({focused,tintColor})=>(
                    <TabBarItem
                        tintColor={tintColor}
                        focused = {focused}
                        normalImage = {require('./tabbar/pfb_tabbar_mine@2x.png')}
                        selectedImage = {require('./tabbar/pfb_tabbar_mine_selected@2x.png')}

                    />
                )
            }),
        },
        Forth: {
            screen: PageFour,
            navigationOptions: ({navigation})=>({
                tabBarLabel: 'tab4',
                headerTitle: '标题4',
                headerStyle:{backgroundColor:'#fff'},
                headerTintColor:'red',
                headerTitleStyle:{fontSize:25},
                tabBarIcon:({focused,tintColor})=>(
                    <TabBarItem
                        tintColor={tintColor}
                        focused = {focused}
                        normalImage = {require('./tabbar/pfb_tabbar_discover@2x.png')}
                        selectedImage = {require('./tabbar/pfb_tabbar_discover_selected@2x.png')}

                    />
                )

            }),
        }
    }, {
        tabBarOptions: {
            activeTintColor: 'tomato', //活跃状态文字颜色
            inactiveTintColor: 'black', //普通状态文字颜色
            activeBackgroundColor: 'orange', //活跃状态item颜色
            style: { backgroundColor: '#ffffff' }, //tab的背景颜色设置
            labelStyle:{fontSize:13}
        },
        lazy: true, //是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部
        swipeEnabled: true, //默认false
        animationEnabled: true,//切换时候是否有动画
    },
)
const Navigator = StackNavigator({
    TabNav: {
        screen: Tab,
    },
})