react-navigation学习笔记二：createStac
2018-11-05 本文已影响648人
ghost__
搭建demo使用相关版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"
介绍
一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置在堆栈的顶部
简单使用
需求：nav1 -> nav2 -> nav3 跳转 返回
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
Button
} from 'react-native';
import {
createStackNavigator
} from 'react-navigation';
class NAV1 extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>this is nav1</Text>
<Button
style={styles.btn}
title={'点击前往nav2'}
onPress={() => {
this.props.navigation.push('nav2')//push方法 跳转到
}}
/>
<Button
style={styles.btn}
title={'点击前往nav3'}
onPress={() => {
this.props.navigation.push('nav3')//push方法 跳转到
}}
/>
</View>
)
}
}
class NAV2 extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>this is nav2</Text>
<Button
style={styles.btn}
title={'点击前往nav3'}
onPress={() => {
this.props.navigation.push('nav3')
}}
/>
</View>
)
}
}
class NAV3 extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>this is nav3</Text>
<Button
style={styles.btn}
title={'返回上一层'}
onPress={() => {
this.props.navigation.goBack();//goBack 返回到上一层
}}
/>
<Button
style={styles.btn}
title={'返回到nav1'}
onPress={() => {
this.props.navigation.navigate('nav1');
//直接设置navigate 这个属性如果nav1不在堆栈中，则将新路由推送到堆栈导航器，否则它将跳转到该屏幕。
}}
/>
<Button
style={styles.btn}
title={'返回到nav1 及返回第一层'}
onPress={() => {
this.props.navigation.popToTop();//因为nav1也是一底层 所以也可以用popToTop() 这种方式返回
}}
/>
</View>
)
}
}
export default createStackNavigator(
{
//设置需要进行push的所有组件
nav1: {
screen: NAV1
},
nav2: {
screen: NAV2
},
nav3: {
screen: NAV3
}
}, {
initialRouteName: 'nav1',//这个设置是初始化设置 初始化显示modul为nav1 可以尝试改变这个值为nav2
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'red',
backgroundColor: 'pink',
fontSize: 25,
},
})
相关属性设置 简单设置
先说一个问题,如何给所有视图配置相同属性，如何区别出来个别视图
参见官网里面的 navigationOptions跨屏共享 与 覆盖共享 navigationOptions
简单说，就是总的 就在createStackNavigator这个函数里面的第二个参数里面进行设置。区别的，就在需要区别的视图哪里进行覆盖设置
共享：
export default createStackNavigator(
{
nav1: {
screen: NAV1
}
}, {
initialRouteName: 'nav1',
navigationOptions: {
headerStyle: {
backgroundColor: 'red',
},
headerTintColor: 'blue',
headerTitleStyle: {
fontSize: 20,
},
}
}
)
区别：
export default class nav2 extends React.Component {
static navigationOptions = {
title: 'navigationScreen2',
headerStyle: {
backgroundColor: 'blue',
},
headerTintColor: 'pink',
headerTitleStyle: {
fontSize: 25,
},
};
render() {
return (
<View style={styles.container}> </View>
)
}
}
接下来是认为设置这些就可以了的属性 有些可以共享 有些需要区别对待
主要有三个大配置 没什么特殊要求 基本满足
共享：
navigationOptions: {
//将应用于View包装标头的样式对象。如果你设置backgroundColor它，那将是你的标题的颜色。
headerStyle: {
backgroundColor: 'red',
},
//后退按钮和标题都使用此属性作为其颜色。色调颜色设置为blue，因此后退按钮和标题标题将为蓝色
headerTintColor: 'blue',
//如果我们想自定义fontFamily，fontWeight等Text为标题样式属性，我们可以用它来做到这一点。这个针对标题
headerTitleStyle: {
fontSize: 20,
color:'pink',
},
}
个别：
static navigationOptions = {
title: 'navigationScreen2',//标题
headerTransparent: true,//背景透明度 不会影响文字
};
部分属性：
navigationOptions: {
//非自定义返回文字 style
headerBackTitleStyle:{
color:'white',
},
//这个是设置左边返回文字的
headerBackTitle:'返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回返回',
//这个设置当屏幕无法适应headerBackTitle设置的长度时 就是用下面的参数
headerTruncatedBackTitle:'太长了',
//设置返回图片
headerBackImage:require(''),
//可以自定义左右的控件 返回按钮可在left自定义
headerLeft:<Text>返回</Text>,
headerRight:<Text>右边</Text>,
//记得在ios上面navigation可以响应手势 这里就是配置相关的东西
//是否启用手势 默认是true
gesturesEnabled: false,
//方向问题 default用于正常行为或inverted从右向左滑动。
gestureDirection:'default',
//从屏幕边缘开始触摸的距离以识别手势 h水平 v垂直
gestureResponseDistance:{
horizontal:200,
vertical:200
},
//背景透明度 不会影响文字
headerTransparent: true,
}
#剩下的还有很多东西 参考官网详情
生命周期
基本，组件的生命周期方法也可以说明navigation的周期。但是react-navigation也存在自己的一套。这里介绍一个组件NavigationEvents
import {
NavigationEvents
} from 'react-navigation';//导入
export default class nav2 extends React.Component {
componentWillUnmount() {
console.log('navigationScreen2即将卸载');
}
navigationWillFocus(payload) {
console.log('will focus', payload)
}
navigationDidFocus(payload) {
console.log('did focus', payload)
}
navigationWillBlur(payload) {
console.log('will blur', payload)
}
navigationDidBulr(payload) {
console.log('did blur', payload)
}
render() {
return (
<View style={styles.container}>
<NavigationEvents
onWillFocus={payload => this.navigationWillFocus(payload)}
onDidFocus={payload => this.navigationDidFocus(payload)}
onWillBlur={payload => this.navigationWillBlur(payload)}
onDidBlur={payload => this.navigationDidBulr(payload)}
/>
<Text style={styles.text}>this is navigationScreen2</Text>
</View>
)
}
}
传参 push传给下一个 navigate返回上一个
详情：https://reactnavigation.org/docs/en/params.html
传参这个 主要两个部分：
1.通过将params放入对象作为该navigation.navigate函数的第二个参数，将params传递给路径：this.props.navigation.navigate('RouteName', { /* params go here */ })
2.阅读屏幕组件中的参数：this.props.navigation.getParam(paramName, defaultValue)。
//传参
<Button
style={styles.btn}
title={'前往navigationScreen3'}
onPress={() => {
this.props.navigation.push('navScr3', {pushParam: '你好 我是navigationScreen2'})
}}
/>
//navigate('模块名', 参数) push('模块名', 参数)
//解析
const pushParam = this.props.navigation.getParam('pushParam', '你说什么');//第二个参数 是设置默认参数 当读取不到是就读取的这个
<Text style={styles.text}>{pushParam}</Text>
//initialRouteParams - 这个属性可以设置一个初始路线的参数 和initialRouteName在一个地方进行设置
跳转的样式 默认都是从右向左push 可以设置另外一种从下向上 ios专属 想想看：点击同意协议 查看界面，这种场景
import {
createStackNavigator,
StackViewTransitionConfigs
} from 'react-navigation';//导入
const IOS_MODAL_ROUTES = ['navScr2'];//需要modal的视图
const IOS_MODAL_LATER_PUSH_ROUTES = ['navScr3'];//modal之后 的视图怎么跳转出来
let dynamicModalTransition = (transitionProps, prevTransitionProps) => {
let name = transitionProps ? transitionProps.scene.route.routeName : null;
let preName = prevTransitionProps ? prevTransitionProps.scene.route.routeName : null;
let isModal = (IOS_MODAL_ROUTES.includes(name)||IOS_MODAL_ROUTES.includes(preName))
&& !(IOS_MODAL_LATER_PUSH_ROUTES.includes(name) || IOS_MODAL_LATER_PUSH_ROUTES.includes(preName));
return StackViewTransitionConfigs.defaultTransitionConfig(
transitionProps,
prevTransitionProps,
isModal
);
};
export default createStackNavigator(
{
start: {
screen: StartScreen,
},
navScr1: {
screen: Nav1
},
navScr2: {
screen: Nav2
},
navScr3: {
screen: Nav3
}
}, {
initialRouteName: 'start',
transitionConfig: dynamicModalTransition,
navigationOptions: {
headerStyle: {
backgroundColor: 'red',
},
headerTintColor: 'blue',
headerTitleStyle: {
fontSize: 20,
color:'pink',
},
}
);
当然也可以自定义,请参见自定义屏幕转换
