在你的 React Native 项目中安装react-navigation这个包
yarn add react-navigation
# or with npm
# npm install react-navigation
然后安装手势控制插件(0.59>版本<0.60 )的建议安装 1.1.3
yarn add react-native-gesture-handler
# or with npm
# npm install react-native-gesture-handler
然后连接到原声库
react-native link react-native-gesture-handler
插件安装好，接下来就是了解下如何使用了
react-navigation主要用到的是三种形式的路由创建，以及路由的嵌套
import {
createBottomTabNavigator, // =>创建底部导航
createStackNavigator, // =>创建通用页面路由
createDrawerNavigator // => 创建侧面打开(抽屉式)路由
} from 'react-navigation'
创建底部路由
createBottomTabNavigator API
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):
- RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么
- BottomTabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。
RouteConfigs支持三个参数screen、path以及navigationOptions；
- screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigation prop。
- path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到；
- navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；
BottomTabNavigatorConfig
- abBarComponent：指定createBottomTabNavigator的TabBar组件，如果不指定在iOS上默认使用TabBarBottom，在Android平台上默认使用TabBarTop。
- TabBarBottom与TabBarTop都是react-navigation所支持的组件，要自定义TabBar可以重写这两个组件也可以根据需要自己实现一个；
- tabBarOptions: 配置TaBar下文会详细讲解；
- initialRouteName : 默认页面组件，createBottomTabNavigator显示的第一个页面；
- order: 定义tab顺序的routeNames数组。
- paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
- backBehavior: 后退按钮是否会导致标签切换到初始tab？ 如果是，则设切换到初始tab，否则什么也不做。 默认为切换到初始tab。
tabBarOptions（tab配置）
- activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
- inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
- showIcon: 是否展示图标，默认是false；
- showLabel: 是否展示标签，默认是true；
- upperCaseLabel - 是否使标签大写，默认为true。
- tabStyle: 设置单个tab的样式；
- indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
- labelStyle: 设置TabBar标签的样式；
- iconStyle: 设置图标的样式；
- style: 设置整个TabBar的样式；
- allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
- safeAreaInset：覆盖的forceInset prop，默认是{ bottom: 'always', top: 'never' }，可选值：top | bottom | left | right ('always' | 'never')；
//BottomTabBar.js
import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from './Index'; //底部菜单页面地址
import System from './System'; //底部菜单页面地址
import Mine from './Mine'; //底部菜单页面地址
export default BottomNavigator = createBottomTabNavigator({
Index:{
screen:Index
},
System :{
screen:System
},
Mine :{
screen:Mine
}
});
//这样最基本的底部路由就创建好了
//App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation'; //路由容器实例化方法
import BottomTabBar from './BottomTabBar';
const Navigator = createAppContainer(BottomTabBar );
//基本路由就算完成
export default class App extends Component {
render() {
return (
<Navigator />
);
}
};
底部导航添加图标
//BottomTabBar.js
import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from './Index'; //底部菜单页面地址
import System from './System'; //底部菜单页面地址
import Mine from './Mine'; //底部菜单页面地址
//路由所需要用到的图片，选中跟未选中
const IndexSelected = require("../assets/icon/index_fous.png");
const IndexIcon = require("../assets/icon/index.png");
const SystemSelected = require("../assets/icon/quanzi_fous.png");
const SystemIcon = require("../assets/icon/quanzi.png");
const MineSelected = require("../assets/icon/zixun_fous.png");
const MineIcon = require("../assets/icon/zixun.png");
export default BottomNavigator = createBottomTabNavigator({
Index: {
screen: Index,
navigationOptions: () => ({
title: '首页',
tabBarIcon: (({ focused }) => {
return (
<Image
source={focused ? IndexSelected : IndexIcon}
style={styles.tabbarImage}
/>
)
}),
})
},
System: {
screen: Information,
navigationOptions: () => ({
title: '系统',
tabBarIcon: (({ focused }) => {
return (
<Image
source={focused ? SystemSelected : SystemIcon}
style={styles.tabbarImage}
/>
)
}),
})
},
Mine: {
screen: AddressList,
navigationOptions: () => ({
title: '我的',
tabBarIcon: (({ focused }) => {
return (
<Image
source={focused ? MineSelected : MineIcon}
style={styles.tabbarImage}
/>
)
}),
})
}
},
{
initialRouteName: 'Index', //默认显示底部导航的哪个页面
tabBarOptions: {
showIcon: true, //是否显示Icon
activeTintColor: '#1985EA' //底部选中颜色
}
});
//这样底部的图标也配置完成了
BottomNavigator.navigationOptions = ({navigation})=>{
//如果我们要对底部导航进行一些动态的配置，我们可以这样操作
//BottomNavigator是当前我们默认导出的component
//navigation里面我们可以得到当前路由的名称等等之类的一些东西
//然后我们可以根据navigation里面拿到的东西进行判断，以获得不同页面不同的展示效果
//最后return
return {
//你要返回的东西
}
}
一个App不可能只有底部路由，还有其他页面，所以我们还会用到
createStackNavigator(RouteConfigs, StackNavigatorConfig):
- RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
- StackNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。
- 具体配置跟上面创建的大体差不多，也可以点击链接查看具体配置
//StackNavigator.js
import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import BottomNavigator' from ./BottomNavigator';
import Detail' from ./Detail'; // =>除底部当行以外的其他页面
import Person' from ./Person'; // =>除底部当行以外的其他页面
//类似一个嵌套路由，把底部路由包裹在Stack中
export default StackNavigator = createStackNavigator({
BottomNavigator:{
screen:BottomNavigator
}
},
Detail:{
screen:Detail
}
},
Person:{
screen:Person
}
},
{
initialRouteName: 'BottomNavigator', //默认显示底部路由
defaultNavigationOptions: { // =>默认的路由全局样式配置
// headerBackImage: <BackImage />, //=>自定义返回按钮
headerStyle: {
backgroundColor: '#1985EA',
elevation: 0.5
},
headerTitleStyle: {
color: '#fff',
// textAlign: "center", //用于android 机型标题居中显示
// flex: 1
},
}
}
)；
//这样我们App的一个基本路由框架就算基本完成，剩余的就是到App.js文件，把之前实例化的路由更改下就OK
更改实例化的createAppContainer
//App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation'; //路由容器实例化方法
import BottomTabBar from './BottomTabBar';
import StackNavigator'./StackNavigator';
//const Navigator = createAppContainer(BottomTabBar );
const Navigator = createAppContainer(StackNavigator); 替换为
//基本路由就算完成
export default class App extends Component {
render() {
return (
<Navigator />
);
}
};
记录下使用的心得，方便以后使用查看，如有写都不对的欢迎指正
网友评论