1.navigation导航对象相关参数

1.1在当前Component获取navigation导航对象

1.2navigate方法

1.2.2使用示例

1.2.3源码

1.3params

1.4navigation的state属性

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

2.2动态修改左右显示组件-headerRight

2.3动态监听右侧组件点击事件

2.4动态设置标题剧中

1.navigation导航对象相关参数

1.1在当前Component获取navigation导航对象

const {state,params,navigate}=this.props.navigation;

1.2navigate方法

navigate方法参数，navigateTo：具体进入页面，params：传递给下一个页面具体参数，action：动作

1.2.2使用示例

const {navigate} = this.props.navigation; //获取navigation的navigate方法
navigate(
'InspectionAndMaintenanceScene', //必填，具体进入的下一个页面
{user:'111'}, //下一个界面接收的参数
//(advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the //actions described in this doc can be set as a sub-action.
//（高级）如果屏幕是导航器，要在子路由器中运行的子操作。此文档中描述的任何操作都可以设置为子操作。
NavigationActions.navigate({ routeName: 'WriteConfigInfoScene' }) //通常不需要配置

);

1.2.3源码

navigate: (navigateTo, params, action) => {if (typeof navigateTo === 'string') {return navigation.dispatch(NavigationActions.navigate({ routeName: navigateTo, params, action }));}invariant(typeof navigateTo === 'object','Must navigateTo an object or a string');invariant(params == null,'Params must not be provided to .navigate() when specifying an object');invariant(action == null,'Child action must not be provided to .navigate() when specifying an object');return navigation.dispatch(NavigationActions.navigate(navigateTo));},

1.3params

//导航去下一面

navigate(navigateTo, params, action)

//下一页面接收参数值

this.list = this.props.navigation.state.params.list;（list上一个界面传过来的key）

this.commands = this.props.navigation.state.params.testCommands;（testCommands上一个界面传过来的key）

1.4navigation的state属性

state.key：配置要返回指定的的页面

 goBack: key => {let actualizedKey = key;if (key === undefined && navigation.state.key) {invariant(typeof navigation.state.key === 'string','key should be a string');actualizedKey = navigation.state.key;}return navigation.dispatch(NavigationActions.back({ key: actualizedKey }));},

state.params：接收上一个界面传过来的参数

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

只需要把下面的界面放置到修改的页面中即可动态修改标题和标题栏样式

title: navigation.state.params.user,修改标题属性；

navigation.state.params.user获取上一个界面过来的{user:'111'}参数设置为标题

//当前视图自定义标题栏目，默认执行static navigationOptions = ({navigation,screenProps}) => {return ({headerStyle:{backgroundColor:'#6486f7'},title: navigation.state.params.user,headerTitleStyle:{color:'#fff', fontSize:Constants.BigFonntSize,flex: 1,textAlign:'center'},headerBackImage:require('../../image/back.png'),headerRight:<TouchableOpacity activeOpacity={0.5} onPress={()=>navigation.state.params.navigatePress()}><Text style={{color:'#fff', fontSize:Constants.MiddleFontSize, paddingRight:15}}>断开</Text></TouchableOpacity>});};

2.2动态修改左右显示组件-headerRight

headerRight:<TouchableOpacity activeOpacity={0.5} onPress={()=>navigation.state.params.navigatePress()}>
<Text style={{color:'#fff', fontSize:Constants.MiddleFontSize, paddingRight:15}}>
断开</Text></TouchableOpacity>

2.3动态监听右侧组件点击事件

不可以这样设置onPress()=>this.unConnect

需要如下设置监听右侧组件点击事件：

a. onPress={()=>navigation.state.params.navigatePress()}

b.关联当前组件的unconnect()

componentDidMount() {

//在static中使用this方法，这样设置以后就可以关联当前组件的unconnect()方法
this.props.navigation.setParams({ navigatePress:this.unConnect });

}

unconnect=()=>{}

2.4动态设置标题剧中

headerTitleStyle:{color:'#fff', fontSize:Constants.BigFonntSize,flex: 1,textAlign:'center'},

设置：flex:1,textAlign:'center'属性即可标题剧中

参考：

https://blog.csdn.net/weixin_34255055/article/details/87118849

7.React Native之StackNavigator实现页面跳转及navigationOptions参数说明；

https://blog.csdn.net/ahou2468/article/details/87625428#2.StackNavigator属性介绍

8.React Native之StackNavigator和TabNavigator结合使用

https://blog.csdn.net/ahou2468/article/details/88117343

React Native之react-navigation动态修改标题、页面导航等相关推荐

React Native之React速学教程
本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...
React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
【稀饭】react native 实战系列教程之Navigator实现页面跳转
主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部'首页'和'我的'两个tabbar. 在js/文件夹下,新建MainScene.js文件 import Rea ...
React Native与React的关系及特点
一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架 ...
[React Native]升级React Native版本
React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...
React Native 与嵌入Android原生与Activity页面互相跳转
前言 RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块.我们知道Android的页面跳转是通过Intent.Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露 ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
WP8开发学习笔记动态修改启动时导航的第一个页面（如登录前启动页为LoginPage，登录后变为MainPage）...
很多时候我们需要在启动程序的时候根据状态改变初始导航页面,比如程序在启动的时候判断用户是否登录, 如果未登录则跳转到LoginPage.xaml否则跳转到MainPage界面. 这时候就要分析程序的启 ...
[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...

React Native之react-navigation动态修改标题、页面导航等

1.navigation导航对象相关参数

1.1在当前Component获取navigation导航对象

1.2navigate方法

1.2.2使用示例

1.2.3源码

1.3params

1.4navigation的state属性

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

2.2动态修改左右显示组件-headerRight

2.3动态监听右侧组件点击事件

2.4动态设置标题剧中

React Native之react-navigation动态修改标题、页面导航等相关推荐

最新文章

热门文章