react-navigation使用

来源：互联网发布：mac粉底液色号选择编辑：程序博客网时间：2024/06/10 07:44

1.react-navigation，建立导航

页面跳转和搭建TabBar，使用的是React Navigation组件，需要npm install --save react-navigation，页面跳转用

http://www.jianshu.com/p/0014506a9b77

const router = StackNavigator({    导航页: {        screen: tabBar    },    广告页: {        screen: Ad    },    设置页: {        screen: Set    }});

TabBar用：

const tabBar = TabNavigator({    首页: {        screen: Home,        navigationOptions: {            tabBarLabel: '首页',            tabBarIcon: ({                tintColor,                focused            }) => (                <Ionicons         name={focused ? 'ios-home' : 'ios-home-outline'}            selectedIconName="ios-home"          size={20}          style={{ color: tintColor }}        />            ),        }    },    发现: {        screen: Find,        navigationOptions: {            tabBarLabel: '发现',            tabBarIcon: ({                tintColor,                focused            }) => (                <Ionicons          name={focused ? 'ios-cube' : 'ios-cube-outline'}          size={20}           style={{ color: tintColor }}        />            ),        }    },    我的: {        screen: My,        navigationOptions: {            tabBarLabel: '我的',            tabBarIcon: ({                tintColor,                focused            }) => (                <Ionicons                name={focused ? 'ios-person' : 'ios-person-outline'}          size={20}            style={{ color: tintColor }}         />            ),        }    },}, {    tabBarPosition: 'bottom',    swipeEnabled: false, // 禁止左右滑动    tabBarOptions: {        activeTintColor: '#666699', // 文字和图片选中颜色        inactiveTintColor: '#CC9999', // 文字和图片默认颜色        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示        indicatorStyle: {            height: 0        }, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？        style: {            backgroundColor: '#FFFF99', // TabBar 背景色        },        labelStyle: {            fontSize: 12, // 文字大小        },    },});

需要注意的是，需要把TabBar嵌套在StackNavigator里使用，不然进入第二页下面导航栏任然不会消失，这点让我觉得使用非常不爽，因为我理解TabBar逻辑上是最外一层，按钮上每个首页面再通过StackNavigator嵌套跳转页面，然而它是因为堆栈的缘故，如果TabBar放在表层，嵌套页面永远在TabBar下一级，不会盖过TabBar，但是如果把TabBar嵌套在StackNavigator里的话，新打开的一页就会占整屏幕，但是感觉这样写会对整个程序的路线非常模糊。（不过也许router方法会对程序线路管理有帮助？没细看）

2.react-native-vector-icons：图标地址

配置的东西有点多，不过写的很详细，一步步走就好

import Ionicons from 'react-native-vector-icons/Ionicons';//首页图标配置    首页: {        screen: Home,        navigationOptions: {            tabBarLabel: '首页',            tabBarIcon: ({tintColor,focused}) => (       <Ionicons  name={focused ? 'ios-home' : 'ios-home-outline'}                  selectedIconName="ios-home"                  size={20}                  style={{ color: tintColor }}                      />            ),        }    },

，

Paste_Image.png

丑陋的首页以及跳转，把最基础的模型搭建好，之后就可以开始尝试各种组件了~

1 0