官网文档：https://reactnavigation.org/docs/zh-Hans/getting-started.html
1、安装react-navigation
yarn add react-navigation
# or with npm
# npm install --save react-navigation
2、安装 react-native-gesture-handler。 如果你使用 Expo，就什么都不需要做，他已经包含在 SDK 中 了
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
Link 所有的原生依赖
react-native link react-native-gesture-handler
iOS 啥都不用做
为了完成 react-native-gesture-handler在 Android 上的安装，请确保在 MainActivity.java 上完成如下修改：
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
...
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
顶部导航
import { createStackNavigator, createAppContainer } from 'react-navigation'
const RootStack = createStackNavigator({})
const AppContainer = createAppContainer(RootStack); //与2.x不同，需要用到createAppContainer
export default class Navigation extends Component {
render() {
return (
<AppContainer/> //2.x返回的是 <RootStack/>
)
}
}
头部导航栏样式属性
- 路由的选项：
path：路由中设置的路径的覆盖映射配置
initialRouteName：设置 stack navigator 的默认页面， 必须是路由配置中的某一个
initialRouteParams：初始路由参数
defaultNavigationOptions：用于屏幕的默认导航选项
- 视觉选项：
mode： 定义渲染和转换的样式
card：使用标准的 iOS 和 Android 屏幕转换， 这是默认设置
modal：iOS独有的使屏幕从底部画出，在 Android 上无效
headerMode：返回上级页面时动画效果
float：呈现一个位于顶部的单个页眉, 并在屏幕被更改时进行动画显示， 这是 iOS 上常见的模式
screen：每个屏幕都有一个标头, 并且页眉随屏幕一起淡入和淡出， 这是 Android 的常见模式
none：无动画
用于导航器内部页面的navigationOptions:header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题
headerBackImage：在标题的后退按钮中显示自定义图片
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：在标题栏右侧展示的 React 组件
headerLeft：在标题栏左侧展示的 React 组件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerLeftContainerStyle：自定义 headerLeft 组件容器的样式，例如，增加 padding
headerRightContainerStyle：自定义 headerRight 组件容器的样式，例如，增加 padding
headerTitleContainerStyle：自定义 headerTitle 组件容器的样式，例如，增加 padding
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
headerTransparent：标头背景是否透明
headerBackground：将其与 headerTransparent 一起使用, 以提供要在标头背景下呈现的组件
gesturesEnabled：是否可以使用手势关闭此页面，iOS默认支持，安卓默认关闭
底部导航样式属性
- initialRouteName： 第一次加载时初始选项卡路由的 routeName
- order：定义选项卡顺序的 routeNames 数组
- tabBarOptions
- activeTintColor：标签和图标选中颜色
- activeBackgroundColor：导航选中背景色
- inactiveTintColor：标签和图标未选中颜色
- inactiveBackgroundColor：导航未选中背景色
- showIcon：是否显示 Tab 的图标,默认不显示
- style：选项卡栏的样式对象
- labelStyle：选项卡标签的样式对象
- tabStyle：选项卡的样式对象
import React, { Component } from 'react'
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation'
import Home from './Home'
import Mine from './Mine'
const StackNavigator = createStackNavigator(
{
Home,
Mine,
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
headerStyle: {
// backgroundColor: '#f4511e',
},
headerBackTitle: null,
// headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
header: null
}
}
)
const HomeStack = createStackNavigator({Home});
const MineStack = createStackNavigator({Mine});
const BottomTabNavigator = createBottomTabNavigator(
{
Home,
Mine,
},
{
initialRouteName: 'Home', //第一次加载时初始选项卡路由的 routeName
order: ['Mine','Home'], //定义选项卡顺序的 routeNames 数组
tabBarOptions: {
activeTintColor: 'red',//标签和图标选中颜色
activeBackgroundColor: 'yellow',//导航选中背景色
inactiveTintColor: '#000', //标签和图标未选中颜色
inactiveBackgroundColor: 'white',//导航未选中背景色
showIcon: true,//是否显示 Tab 的图标,默认不显示
style: {
backgroundColor: 'yellow',//tabBar背景色
height: 49
},
// labelStyle 选项卡标签的样式对象
// tabStyle 选项卡的样式对象
},
}
)
// const AppContainer = createAppContainer(StackNavigator); 顶部导航
const AppContainer = createAppContainer(BottomTabNavigator); //底部导航
export default class Navigation extends Component {
render() {
return (
<AppContainer/>
)
}
}
还有一些不常用的属性与样式没有用到，具体的可以查看官方：API
附加：带有icon图标的底部导航，用到了 nativebase 与 react-native-vector-icons
import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { Icon } from 'native-base';
import App from './App'
import Car from './Car'
import Camera from './Camera'
import Search from './Search'
const SELECTED_COLOR = 'white';
const UNSELECTED_COLOR = '#000';
const SELECTED_BGCOLOR = 'blue';
const UNSELECTED_BGCOLOR = 'deepskyblue';
const ORDER = ['App','Search','Camera','Car'];
export class TabBarIcon extends Component {
render() {
return(
<Icon name={this.props.name}
style={{
marginBottom: -5,
marginRight: 2,
fontSize: 24,
color: this.props.color,
}}
/>
)
}
}
const BottomTabNavigator = createBottomTabNavigator(
{
App: {
screen: App,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon:({focused}) => (
<TabBarIcon
focused={focused}
name={'apps'}
color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
/>
)
}
},
Car: {
screen: Car,
navigationOptions: {
tabBarLabel: '汽车',
tabBarIcon:({focused}) => (
<TabBarIcon
focused={focused}
name={'car'}
color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
/>
)
}
},
Camera: {
screen: Camera,
navigationOptions: {
tabBarLabel: '相机',
tabBarIcon:({focused}) => (
<TabBarIcon
focused={focused}
name={'camera'}
color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
/>
)
}
},
Search: {
screen: Search,
navigationOptions: {
tabBarLabel: '搜索',
tabBarIcon:({focused}) => (
<TabBarIcon
focused={focused}
name={'search'}
color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
/>
)
}
}
},
{
initialRouteName: 'App',
order: ORDER,
tabBarOptions: {
activeTintColor: SELECTED_COLOR,
activeBackgroundColor: SELECTED_BGCOLOR,
inactiveTintColor: UNSELECTED_COLOR,
inactiveBackgroundColor: UNSELECTED_BGCOLOR,
style: {
backgroundColor: 'pink',
},
labelStyle: {
paddingBottom: 5,
fontSize: 14,
}
}
}
)
const AppContainer = createAppContainer(BottomTabNavigator);
export default class FooterTabsExample extends Component {
render() {
return (
<AppContainer/>
)
}
}
tabBarIcon:({focused}) => (
<TabBarItem
focused={focused}
normalImage={require('../icon/home.png')}
selectedImage={require('../icon/home_selected.png')}
/>
)
export class TabBarItem extends Component {
render() {
return(
<Image source={ this.props.focused
? this.props.selectedImage
: this.props.normalImage }
style={ { width:24,height:24 } }
/>
)
}
}
