React Native
来源:互联网 发布:开通知乎专栏有什么用 编辑:程序博客网 时间:2024/06/05 06:48
最近在学React Native,了解了一个原本iOS中非常重要的导航控件的使用方法。不过在React Nativa中,这个导航控件是不会自带顶部的导航栏的,也不会自动生成返回按钮之类的,只是提供了类似的导航功能,且原理也是出栈入栈的方式,也就是说同样是有着push和pop方法的。这里不讲React Native的基础了,直接讲一讲Navigator这个组件的基本使用方法。
对于一个导航组件,最基本的就是下面几个点:
- 进入下一个界面
- 返回上一个界面
- 传递数据给下一个界面
- 返回数据给上一个界面
我们一个一个来看。
首先要使用Navigator组件,按照惯例是要import它的,这个别忘了。一般我们都是在index.ios.js文件中放置整个app的入口界面,这里我们也是要把Navigator这个组件框架放在index.ios.js文件中,代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
可以看到我们return了一个Navigator容器。initialRoute就是我们要放在这个导航容器中的根界面,也是第一个界面,这里我们放的是名为FirstView的界面,这个界面是由另一个js文件描述的,所以也要记得import。我们把它作为component参数的值,至于另一个name参数,真的也就是一个name而已,不太重要。然后紧跟着的configureScene是描述界面之间的过渡动画的,比如从右边滑出来啊或者从底部滑出来之类的,在node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js文件中可以看到所有可以选的方式。接下来的内容直接写就可以了。
到此,我们放置了一个Navigator的导航容器,第一个界面是我们的FirstView界面,至于界面长什么样子,就是在FirstView.js文件中描述了。
- react native
- React Native
- React Native
- React- Native
- react-native
- React Native
- React Native
- react native
- React Native
- react-native
- React Native
- react native
- React Native
- React Native
- React Native
- React Native
- react native
- React Native
- .vimrc
- 01-nodejs入门介绍
- Main函数参数argc,argv说明
- android Icon UI
- Mac安装Python MySQLdb
- React Native
- RAC环境下如何利用冷备份进行恢复
- Java中静态代码块、构造代码块、构造方法块
- 广播 通知
- SQL
- 【codevs 1995】黑魔法师之门
- 上传视频到FTP服务器+播放
- HDU3220-Alice’s Cube
- 10.10