react-navigation路由基础信息与头部标题栏配置（笔记）1.创建视图容器（createAppContainer）和路由栈（createStackNavigator）；
2.路由信息获取可以通过this.props.navigation;
3.navigation内包含信息与⽅法：
push：向视图堆栈直接写⼊视图路径；
navigate：直接指向所要跳转的视图；
goBack：从视图堆栈中取出后进的视图路由信息，跳转到⽬标视图，且移除此视图信息；
4.路由传值与取值：
/* 1. 通过路由传值 */
this.props.navigation.navigate('Details', { itemId: 86, otherParam: '键值', });
/* 2. 通过props获取键值 */
const { navigation } = this.props;//当前路由信息
const itemId = Param('itemId', 'NO-ID');//传⼊键名获取信息fontweight属性bold
5.设置页⾯title（单页⾯）:
/*设置navigationOptions 静变量配置title信息*/
static navigationOptions = { title: 'Details', };
/*通过动态事件更新navigationOptions信息，setParams来配置*/
onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
6.配置标题栏样式：
headerStyle：标题栏dom样式信息；
headerTintColor：标题栏按钮的⽂本颜⾊（只能编辑字体颜⾊）；
headerTitleStyle：页⾯名称样式（可编辑其他样式属性）；
例：static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
7.跨页⾯头部样式配置：
在路由注⼊时添加defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
}
单页⾯title配置可以覆盖公共配置
8.⾃定义组件替换title：
我们可以通过⽤⾃⼰的title替换默认的title；
class LogoTitle extends React.Component {
render() {
return (
<Image source={require('./spiro.png')} style={{ width: 30, height: 30 }} />
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
// 导⼊title标签
headerTitle: <LogoTitle />,
headerBackTitle(headerTruncatedBackTitle):"返回按钮⽂本"，
：
可⽤图⽚替换返回⽂本
}; /* render function, etc */ }
9.标题栏按钮：
a.可通过navigationOptions={headerRight: ( <Button onPress={() => alert('This is a button!')} title="Info" color="#fff" /> )}配置右边按钮（headerRight）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。