react-native react-navigation的用法
react-navigation升级了, 看这个:
一、问题背景
react-navigation是react-native官方推荐的,基于Javascript的可扩展且使用简单的导航,功能强大且完备
回顾一下,react-navigation包含以下功能来帮助我们创建导航器:
- StackNavigator - 一次只渲染一个页面,并提供页面之间跳转的方法。 当打开一个新的页面时,它被放置在堆栈的顶部
- TabNavigator - 渲染一个Tab选项卡,让用户可以在几个Tab页面之间切换
- DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉,类似bilibili和QQ的隐藏在左侧的内容栏功能
(1)通过navigate函数实现界面之间跳转:
this.props.navigation.navigate('Mine');
参数为我们在StackNavigator注册界面组件时的名称。
同样也可以从当前页面返回到上一页:
// 返回上一页
this.props.navigation.goBack();
这是手动返回上一页,也可通过每个页面自带的返回图标返回
(2)跳转时传值:
this.props.navigation.navigate('Mine',{info: 'value'});
第一个参数同样为要跳转的界面组件名称,第二个参数为要传递的参数,info可以理解为key,后面即传递的参数(value值)。
同样,我们也可以在跳转后的页面去获取携带过来的值:
this.props.navigation.state.params.info}
通过state.params来获取传来的参数,后面为key值。此处为info。
//会覆盖StackNavigator声明的页面的navigationOptions
static navigationOptions = ({navigation}) => ({
headerTintColor: '#fff',
headerStyle: {height: 65, backgroundColor: '#fb7299'},
headerTitle: navigation.state.params.title, //这是从上一级跳转携带的
headerTitleStyle: {
fontSize: 18,
color: '#fff',
alignSelf: 'center', //包括下面的属性主要是为了标题居中显示
flex: 1,
textAlign: 'center'
},
headerRight: <View>
<TouchableOpacity onPress={() => {navigation.state.params.toOperate();}}> //此处必须通过添加参数的形式来调用方法
<View><Text style={{color: '#fff', marginRight: 20}}>下一步</Text></View>
</TouchableOpacity >
</View>
})
1. navigation.state.params.title表示通过参数的形式来显示标题
2. 想要标题居中,alignSelf: 'center', flex: 1, textAlign: 'center'
3. navigation.state.params.toOperate();通过这种传参的方式,在标题栏中调用方法 该方法需要在componentDidMount()等方法中设置传递
componentDidMount() {
this.props.navigation.setParams({toOperate: () => {
alert('操作')
}})
}
三、结语
先这样咯!
react-native react-navigation的用法的更多相关文章
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- React Native中ref的用法(通过组件的ref属性,来获取真实的组件)
ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...
- 转载一篇React native的props的用法
注:默认值如何设置 http://www.tuicool.com/articles/uMfYv2q
- React Native纯干货总结
随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- H5、React Native、Native应用对比分析
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...
- React Native控件之Listview
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...
- H5、React Native、Native性能区别选择
“存在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移 ...
- React Native笔记整理
判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...
随机推荐
- 创建私有的cocoapod库
我是通过cocoachina 的一篇文章 跟着学习的 http://www.cocoachina.com/ios/20150228/11206.html 这里我简单描述下 主要还是给我自己记忆的 ...
- New Concept English Two 7
$课文14 你会讲英语吗? 133. I had an amusing experience last year. 去年我有过一次有趣的经历. 134. After I had left a smal ...
- specialized English for automation-Lesson 3 CMOS Logic Circuit
CMOS logic is a newer technology, based on the use of complementary MOS transistors toperform logic ...
- win10中jdk1.8环境配置完,重启之后配置失效
1.win10操作系统下重启电脑java环境变量失效 解决方式: 右击开始按钮,选择管理员方式的windows powershell,如下图: 在窗口中输入javac,一切正常,即使重启都不会有问题啦 ...
- SVN 定时 更新代码 Demo
1. 涉及技术: Winservice: 用system身份后台跑: Quartz:定时任务: SVN 2. 思路: Quartz定时调用cmd 程序,执行SVN update 命令,整个程序寄宿 ...
- Python流程控制-逻辑运算-if...else语句
摘录自:http://www.runoob.com/python/python-if-statement.html Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执 ...
- 解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题
解决:win8.1 oepnvpn客户端 redirect-gateway def1无效,自动获取的IP没有网关问题 该问题是操作系统权限问题,需要将程序设置为以管理员模式运行和以windows7兼容 ...
- java 面向对象 — 继承
继承中的构造方法,先执行父类中的构造方法,然后执行子类中的构造方法 继承中的属性,最后执行的属性 覆盖前面的属性 因为是开辟了 两个内存空间,所以相比较是不同的. 如果想比较两个对象的值是否相同的话, ...
- Could not write content: No serializer found for class and no properties discovered to create BeanSerializer (to avoid exception, disable SerializationFeature.FAIL_ON_EMPTY_BEANS) )
1. 问题 org.springframework.http.converter.HttpMessageNotWritableException: Could not write content: N ...
- 用PHP收发邮件
注:在WinForm下怎么试都不好使,最后没办法换成了PHP下,一试就好使了. 这里用到了phpmailer组件,网上有下. 转:phpnow支持ssl的方法 原文出处:http://blog.163 ...