react native 之页面跳转
第一章 跳转的实现
1.component 中添加这行代码
<View style={styles.loginmain}>
<Text style={styles.logintext} onPress={() => navigator.push({name:'In'})}>注册</Text>
<Text style={styles.logintext} onPress={() => navigator.push({name:'Forget'})}>忘记密码 </Text>
</View>
onPress 主要运用于点击事件中
2.在运行的主页面中只能运行如下的component
const thunkMiddleWare = (store) => (next) => (action) => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState)
}
return next(action) export default function () {
return (
<Provider store={createStore(reducer, applyMiddleware(thunkMiddleWare))}>
<NavigatorApp />
</Provider>
)
}
需要注意的是:a. middleware 是中间件的设置,它有固定的格式.
<view/> 不能包含<Navigator/>这个标签 但反过来可以
3.点击跳转的页面的设置代码
function InComponent({navigator}){
return (
<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}>
<Text style={styles.size} onPress={() => navigator.pop()} >注册</Text>
</View>
) } function ForgetComponent({navigator}){
return (
<View style={[styles.fullCenter,{backgroundColor:'#CCC',flex:1}]}>
<Text style={styles.size} onPress={() => navigator.pop()} >忘记密码</Text>
</View>
) } export default class NavigatorApp extends Component {
render() {
return ( <Navigator
initialRoute={{name:'Main'}}
renderScene={this.renderScene}
navigationBar ={this.navigationBar}
/> );
} renderScene(route,navigator){ if (route.name==="Main"){
return <App navigator={navigator}/>
} if (route.name==="In"){
return <InComponent navigator={navigator}/>
} if (route.name==="Forget"){
return <ForgetComponent navigator={navigator}/>
} if (route.name==='Nav'){
return <NavComponent navigator={navigator} />
}
} // configureScene (route,navigator) {
// return Navigator.SceneConfigs.FloatFromBottom
// }
}
根据name 实现不同的跳转
第二章 跳转效果的展示
react native 中的跳转效果可以很轻松的设置,不像js 中需要设置相应的动画效果,它主要是通过这一行代码设置的
configureScene (route,navigator) {
return Navigator.SceneConfigs.FloatFromBottom
}
这是从下往上跳出的效果.
react native 中还有哪些跳转效果,后期继续补充
react native 之页面跳转的更多相关文章
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- react native 之页面布局
第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...
- react项目中页面跳转、刷新及获取网络状态
// 页面跳转 window.location.href = 'http://speedtest.wangxiaotong.com/' // 页面刷新 window.location.reload() ...
- React Native之ViewPagerAndroid跳转页面问题
前言: 网上目前react-native的教程较少,加上许多帖子还是用的ES5(2015年6月已发布ES6标准),有些细节很难找到答案,这里把遇到的问题做一个分享,让学习者尽量少踩坑. 出现问题: 1 ...
- [技术博客]React Native——HTML页面代码高亮&数学公式解析
问题起源 原有博文显示时代码无法高亮,白底黑字的视觉效果不好. 原有博文中无法解析数学公式,导致页面会直接显示数学公式源码. 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化. (失 ...
- React Native 实现页面动态切换
第一步. 初始化子View constructor(props){ super(props); this.state = { isChange : true, itemView : (<Text ...
- 安装android Studio和运行react native项目(跳坑篇)
1.需配环境变量,值为sdk的地址. ANDROID_HOME 值:E:\Users\HP\AppData\Local\Android\sdk 2.下载gradle-2.14.1-all.zip 包 ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
随机推荐
- Spring-IOC源码解读3-依赖注入
当容器已经载入了BeanDefinition的信息完成了初始化,我们继续分析依赖注入的原理,需要注意的是依赖注入是用户第一次向IOC容器获取Bean的时候发生的,这里有个例外,那就是如果用户在Bean ...
- Spring-IOC源码解读2.2-BeanDefinition的载入和解析过程
1. 对IOC容器来说这个载入过程就像是相当于把BeanDefinition定义的信息转化成Spring内部表示的数据结构.容器对bean的管理和依赖注入过程都是通过对其持有的BeanDefiniti ...
- 【HDOJ5979】Convex(三角函数)
题意:n个点在一个半径为R的圆上,给出这n个点顺时针的夹角差值,求这n个点的凸包面积 n<=10,R<=10 思路:S=1/2*sinθ*a*b 角度转弧度再用sin C++有点小毛病,叫 ...
- Linux性能分析Top
前言 在实际开发中,有时候会收到一些服务的监控报警,比如CPU飙高,内存飙高等,这个时候,我们会登录到服务器上进行排查.本篇博客将涵盖这方面的知识:Linux性能工具. 一次线上问题排查模拟 背景:服 ...
- Android SurfaceView与View
SurfaceView介绍 SurfaceView是视图(View)的继承类,这个视图里面内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸,而SurfaceView控制 ...
- 如何查看项目的Laravel框架的版本
如何查看项目的Laravel框架的版本 接触到一个已有的使用Laravel框架的项目时, 打开项目根目录下的composer.json文件, 找到 laravel/framework 的值,即可查看版 ...
- 让Mac OS X专用高速移动硬盘在Linux下也能被读写
MacBook Pro以及iMac等设备都具备雷电接口和USB 3.0接口,配合使用Mac OS X格式化的专用高速移动硬盘读写数据都非常快.那么这种硬盘可以在Linux下被读写吗?其实,Mac OS ...
- (5)Swing事件
import javax.swing.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; publi ...
- cssnext下一代的css
前端技术更新迭代的速度令人咂舌,互联网+的风头刚起那几年,前端技术大多还停留在jquery阶段,按需加载还停留在seajs和requirejs的阶段,css3和H5也不过才崭露头角,但经过几年的飞速发 ...
- Codeforces Gym 100286J Javanese Cryptoanalysis 傻逼暴力
原题地址:http://codeforces.com/gym/100286/attachments/download/2013/20082009-acmicpc-northeastern-europe ...