react-native之 react-navigation

react-navigation准确的说不是一个官方推出的库, 但是一经推出, 就受到了广大开发者的喜爱, 官方也废弃了自己曾经的导航库 navigator, 转而在官方文档上推荐这个第三方. 传送门

接下来通过一个例子, 主要来说一下createStackNavigator 和 createBottomTabNavigator 的实际用法.

1.安装

在项目文件夹目录下, 输入命令行:

npm install react-navigation --save

或者

yarn add react-navigation

2. 创建底部 TabBar

这个操作就相当于在 iOS 里的 TabBarController 的操作, 在这里可以设定 tabbarItem 的图片和文字, 可以绑定每个 tabbarItem 所对应的页面. 具体代码如下:

import React, { Component } from 'react';
import {
    StyleSheet,
    Dimensions,
    Image,
    Platform
} from 'react-native';
import {
    createBottomTabNavigator
} from 'react-navigation';
import color from '../../macro/color';
import Main from '../main/main';
import Discovery from '../discovery/discovery';
import Mine from '../mine/mine';

export default Tab = createBottomTabNavigator(
    {
        Main: {
            screen: Main,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '首页',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconMain} source={focused ? require('../../image/tabbar/main-select.png') : require('../../image/tabbar/main.png')} />
                ),
            }
        },

        Discovery: {
            screen: Discovery,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '发现',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconDiscovery} source={focused ? require('../../image/tabbar/discivery-select.png') : require('../../image/tabbar/discovery.png')} />
                ),
            }
        },

        Mine: {
            screen: Mine,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '我的',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconMine} source={focused ? require('../../image/tabbar/mine-select.png') : require('../../image/tabbar/mine.png')} />
                ),
            }
        },
    }, {
        tabBarOptions: {
            activeTintColor: color.tabbar_active,
            inactiveTintColor: color.tabbar_inactive,
        },
        animationEnabled: true,//切换页面时是否有动画
        swipeEnabled: false,//是否可滑动切换页面
        initialRouteName: 'Main',//默认页面
        tabBarOptions: {
            indicatorStyle: {
                height: 0,
            },
            labelStyle: {
                fontSize: 11,
            },
            style: {
                borderTopColor: '#ebebeb',
                borderWidth: 0,
                backgroundColor: 'white',
                height: Dimensions.get('window').height*0.08,
            }
        }
    }
)

const styles = StyleSheet.create({

    tabBarIconMain: {
        width: 19,
        height: 18,
    },
    tabBarIconDiscovery: {
        width: 25,
        height: 18.5,
    },
    tabBarIconMine: {
        width: 17,
        height: 18.5,
    }
});

可设置的属性是不止这些的, 有兴趣的童鞋可以自行增删改.

3. 添加导航

具体代码:

import React, {
    Component
} from 'react';
import {
    createStackNavigator
} from 'react-navigation';
import Tab from './bottomTab';
import SettingPage from '../mine/settings';
import AppointmentPage from '../mine/appointment';
import CollectPage from '../mine/collect';
import OrderPage from '../mine/order';
import PointPage from '../mine/point';
import PromotionPage from '../mine/promotion';
import MainPage from '../main/main';


const HomeStack = createStackNavigator(
    {
        Tab: {
            screen: Tab,
            navigationOptions: ({navigation}) => ({
                header: null//如果不给页面添加导航栏, header 一定要置为 null
            })
        },

        MainPage: {screen: MainPage},
        SettingPage: {screen: SettingPage},
        AppointmentPage: {screen: AppointmentPage},
        CollectPage: {screen: CollectPage},
        OrderPage: {screen: OrderPage},
        PointPage: {screen: PointPage},
        PromotionPage: {screen: PromotionPage},
    },{
        initialRouteName: 'Tab',
        headerMode: 'screen'
    }
)

export default class root extends Component {
    render() {
        return (
            <HomeStack />
        )
    }
}

注意: 如果不给页面添加导航栏, 一定要将 header 置为 null

另外, 给单独的页面设置导航栏时, 可以在上面的代码位置中设置, 也可以在具体的页面中设置. 在具体的页面中设置示例代码:

export default class OrderPage extends Component {

    static navigationOptions = {
        title: '标题',
        headerStyle: {
            backgroundColor: color.white,
        },
        headerTitleStyle: {
            fontSize: px2dp(18),
            color: color.color333,
            fontWeight: 'normal',
        },
    };

    render() {
        return (
            <Text>hello</Text>
        )
    }
}

4. 入口

最重要的一步, 就是在 index.js 文件中设置应用入口.

import Root from './pages/base/rootPage'

AppRegistry.registerComponent('RN_inet', () => Root);

到这里基本上就可以完整的搭建一个带有导航栏和 tabbar 的项目框架了.

我也是刚刚学习 RN的小白, 倘有不对之处, 还请指正! 这是交流群哦 : 860196537