react-native新导航组件react-navigation详解
有问题找 issues, 基本上坑都在这里.
官方文档
主要构成
按使用形式主要分三部分:
1 StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2 TabNavigator: 相当于iOS里面的TabBarController，屏幕下方的标签栏
3 DrawerNavigator: 抽屉效果，侧边滑出
StackNavigator 导航栏
API: StackNavigator(RouteConfigs, StackNavigatorConfig)
-
// 注册导航
-
const Navs = StackNavigator({
-
Home: { screen: Tabs },
-
HomeTwo: {
-
screen: HomeTwo, // 必须, 其他都是非必须
-
path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking
-
navigationOptions: {} // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文
-
},
-
HomeThree: { screen: HomeThree },
-
HomeFour: { screen: HomeFour }
-
}, {
-
initialRouteName: 'Home', // 默认显示界面
-
navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
-
header: { // 导航栏相关设置项
-
backTitle: '返回', // 左上角返回键文字
-
style: {
-
backgroundColor: '#fff'
-
},
-
titleStyle: {
-
color: 'green'
-
}
-
},
-
cardStack: {
-
gesturesEnabled: true
-
}
-
},
-
mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
-
headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
-
onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调
-
onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调
-
});
navigationOptions
参数:
-
title: 导航栏的标题 -
header: 导航栏设置对象visible: 导航栏是否显示title: 导航栏的标题, 可以是字符串也可以是个组件backTitle: 左上角的返回键文字, 默认是上一个页面的titleright: 导航栏右按钮left: 导航栏左按钮style: 导航栏的styletitleStyle: 导航栏的title的styletintColor: 导航栏颜色
-
cardStack: 配置card stackgesturesEnabled: 是否允许右滑返回，在iOS上默认为true，在Android上默认为false
在组件中设置static navigationOptions示例:
-
static navigationOptions = {
-
title: 'homeThree',
-
header: (navigation, defaultHeader) => ({
-
...defaultHeader, // 默认预设
-
visible: true // 覆盖预设中的此项
-
}),
-
cardStack: {
-
gesturesEnabled: false // 是否可以右滑返回
-
}
-
};
-
-
// 或这样
-
static navigationOptions = {
-
// title: 'Two', // 写死标题
-
title: (navigation, childRouter) => { // 动态标题
-
if (navigation.state.params.isSelected) {
-
return `${navigation.state.params.name}选中`;
-
} else {
-
return `${navigation.state.params.name}没选中`;
-
}
-
},
-
header: ({ state, setParams, goBack }) => {
-
let right;
-
if (state.params.isSelected) {
-
right = ("取消" onPress={() => setParams({ isSelected: false })}/>);
-
} else {
-
right = ("选择" onPress={() => setParams({ isSelected: true })}/>);
-
}
-
let left = ("返回" onPress={() => goBack()}/>);
-
let visible = false; // 是否显示导航栏
-
return { right, left, visible };
-
},
-
// header: {left: },
-
};
StackNavigatorConfig
参数:
initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件initialRouteParams: 初始路由的参数navigationOptions: 屏幕导航的默认选项-
paths: RouteConfigs里面路径设置的映射 -
mode: 页面切换模式:card: 普通app常用的左右切换modal: 上下切换
-
headerMode: 导航栏的显示模式:float: 无透明效果, 默认screen: 有渐变透明效果, 如微信QQ的一样none: 隐藏导航栏
-
cardStyle: 样式 -
onTransitionStart: 页面切换开始时的回调函数 onTransitionEnd: 页面切换结束时的回调函数
TabNavigator 标签栏
-
// 注册tabs
-
const Tabs = TabNavigator({
-
Home: {
-
screen: Home,
-
navigationOptions: {
// 也可以写在组件的static navigationOptions内
-
tabBar: {
-
label:
'首页',
-
icon: ({tintColor}) => (
require(
'./app/images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
-
},
-
}
-
},
-
Bill: {
-
screen: Bill,
-
navigationOptions: {
-
tabBar: {
-
label:
'账单',
-
icon: ({tintColor}) => (
require(
'./app/images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
-
},
-
}
-
},
-
Me: {
-
screen: Me,
-
navigationOptions: {
-
tabBar: {
-
label:
'我',
-
icon: ({tintColor}) => (
require(
'./app/images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
-
},
-
}
-
}
-
}, {
-
animationEnabled:
false,
// 切换页面时是否有动画效果
-
tabBarPosition:
'bottom',
// 显示在底端，android 默认是显示在页面顶端的
-
swipeEnabled:
false,
// 是否可以左右滑动切换tab
-
backBehavior:
'none',
// 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
-
tabBarOptions: {
-
activeTintColor:
'#ff8500',
// 文字和图片选中颜色
-
inactiveTintColor:
'#999',
// 文字和图片未选中颜色
-
showIcon:
true,
// android 默认不显示 icon, 需要设置为 true 才会显示
-
indicatorStyle: {
-
height:
0
// 如TabBar下面显示有一条线，可以设高度为
0
后隐藏
-
},
-
style: {
-
backgroundColor:
'#fff',
// TabBar 背景色
-
// height:
44
-
},
-
labelStyle: {
-
fontSize:
10,
// 文字大小
-
},
-
},
-
});
DrawerNavigator抽屉
-
const DrawerNav = DrawerNavigator({
-
Home: {
screen: Home },
-
Bill: {
screen: Bill },
-
Me: {
screen: Me },
-
HomeTwo: {
screen: HomeTwo },
-
HomeThree: {
screen: HomeThree },
-
HomeFour: {
screen: HomeFour },
-
BillTwo: {
screen: BillTwo },
-
BillThree: {
screen: BillThree }
-
}, {
-
drawerWidth:
200,
// 抽屉宽
-
drawerPosition:
'left',
// 抽屉在左边还是右边
-
// contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
-
contentOptions: {
-
initialRouteName: Home,
// 默认页面组件
-
activeTintColor:
'white',
// 选中文字颜色
-
activeBackgroundColor:
'#ff8500',
// 选中背景颜色
-
inactiveTintColor:
'#666',
// 未选中文字颜色
-
inactiveBackgroundColor:
'#fff',
// 未选中背景颜色
-
style: {
// 样式
-
-
}
-
}
-
});
navigation
在StackNavigator中注册后的组件都有navigation这个属性. navigation又有5个参数:navigate, goBack, state, setParams, dispatch, 可以在组件下console.log一下this.props就能看到.
-
this.props.navigation.navigate('Two', { name: 'two' }): push下一个页面routeName: 注册过的目标路由名称params: 传递的参数action: 如果该界面是一个navigator的话，将运行这个sub-action
-
this.props.navigation.goBack(): 返回上一页 -
this.props.navigation.state: 每个界面通过这去访问它的router，state其中包括了：routeName: 路由名key: 路由身份标识params: 参数
-
this.props.navigation.setParams: 该方法允许界面更改router中的参数，可以用来动态的更改导航栏的内容 -
this.props.navigation.dispatch: 可以dispatch一些action，主要支持的action有：-
Navigate:-
import { NavigationActions } from 'react-navigation'
-
-
const navigationAction = NavigationActions.navigate({
-
routeName: 'Profile',
-
params: {},
-
-
// navigate can have a nested navigate action that will be run inside the child router
-
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
-
})
-
this.props.navigation.dispatch(navigationAction)
-
-
Reset: Reset方法会清除原来的路由记录，添加上新设置的路由信息, 可以指定多个action，index是指定默认显示的那个路由页面, 注意不要越界了-
import { NavigationActions } from 'react-navigation'
-
-
const resetAction = NavigationActions.reset({
-
index: 0,
-
actions: [
-
NavigationActions.navigate({ routeName: 'Profile'}),
-
NavigationActions.navigate({ routeName: 'Two'})
-
]
-
})
-
this.props.navigation.dispatch(resetAction)
-
-
SetParams: 为指定的router更新参数，该参数必须是已经存在于router的param中-
import { NavigationActions } from 'react-navigation'
-
-
const setParamsAction = NavigationActions.setParams({
-
params: {}, // these are the new params that will be merged into the existing route params
-
// The key of the route that should get the new params
-
key: 'screen-123',
-
})
-
this.props.navigation.dispatch(setParamsAction)
-
-
Navigation Actions
- 支持以下actions:
Navigate:Reset:Back:Set Params:Init:
Deep Link
其他app或浏览器使用url打开次app并进入指定页面. 如浏览器输入url demo4://home/home3直接进入home3页面.
iOS版设置
- 使用Xcode设置
Schemes; - 在
AppDelegate添加一下代码:
-
- (
BOOL)
application:(
UIApplication *)application
openURL:(
NSURL *)url
-
sourceApplication:(
NSString *)sourceApplication
annotation:(
id)annotation {
-
return [RCTLinkingManager
application:application
openURL:url
-
sourceApplication:sourceApplication
annotation:annotation];
-
}
- js组件在注册路由时设置唯一的路径path, 例如
Home2: { screen: Home2, path:'app/Home2' }; - 在手机浏览器访问
demo4://app/Home2, 弹窗选择打开, 就可以打开demo4app并进到Home2页面了.