今天生病了,难受。。。

Navigator顾名思义就是导航器的意思。

在Android和iOS中,导航器的样式是不一样的 ,有一个比较好的网址可以提供大家学习(网址),由于样式的不统一,于是我决定自己做一个样式,就不再使用原生的样式了。

 import React from 'react-native'
import WelcomeScreen from './screens/WelcomeScreen'
import MainRoute from './screens/MainRoute'
import RegisterScreen from './screens/UserLRScreen/RegisterScreen'
import LoginScreen from './screens/UserLRScreen/LoginScreen'
import SearchScreen from './screens/SearchScreen'
import CommodityScreen from './screens/CommodityScreen'
import GraphicWebView from './screens/GraphicWebView'
import BuyWebView from './screens/BuyWebView'
import CategoryScreen from './screens/CategoryScreen' var {
Text,
View,
Navigator,
TouchableOpacity,
PropTypes,
Platform
} = React class Route extends React.Component {
static propTypes = {
navigator: PropTypes.object,
commodity: PropTypes.string
};
render () {
return (
<Navigator
initialRoute={{id: Platform.OS === 'ios' ? 'MainRoute' : 'WelcomeScreen', name: 'Index'}}
renderScene={ this.renderScene.bind(this) }
configureScene={(route) => {
return Navigator.SceneConfigs.FloatFromRight
}} />
)
} renderScene (route, navigator) {
var routeId = route.id
if (routeId === 'WelcomeScreen') {
return (
<WelcomeScreen
navigator={navigator} />
)
}
if (routeId === 'MainRoute') {
return (
<MainRoute
navigator={navigator}/>
)
}
if (routeId === 'RegisterScreen') {
return (
<RegisterScreen
navigator={navigator} />
)
}
if (routeId === 'LoginScreen') {
return (
<LoginScreen
navigator={navigator} />
)
}
if (routeId === 'SearchScreen') {
return (
<SearchScreen
navigator={navigator} />
)
}
if (routeId === 'CommodityScreen') {
return (
<CommodityScreen
route={route}
navigator={navigator} {...route.passProp}/>
)
}
if (routeId === 'GraphicWebView') {
return (
<GraphicWebView
route={route}
navigator={navigator} {...route.passProp}/>
)
}
if (routeId === 'BuyWebView') {
return (
<BuyWebView
route={route}
navigator={navigator} {...route.passProp}/>
)
}
if (routeId === 'CategoryScreen') {
return (
<CategoryScreen
route={route}
navigator={navigator} {...route.passProp}/>
)
}
return this.noRoute(navigator)
} noRoute (navigator) {
return (
<View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
<TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
onPress={() => navigator.pop()}>
<Text style={{color: 'red', fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text>
</TouchableOpacity>
</View>
)
}
} module.exports = Route

不要看着代码很长,其实需要理解的就是一点点

首先介绍一下下面的代码,其中initialRoute,表示首先去加载的是哪一个界面(当然是欢迎界面了),由于iOS有默认的欢迎界面我们就不需要欢迎界面了,因此在这里判断一下是在哪个平台运行的。renderScene就是你需要显示的界面了,在这里我用id去区分每一个界面。configureScene:这个是页面之间跳转时候的动画。可以选择自己喜欢的跳转风格。

    <Navigator
initialRoute={{id: Platform.OS === 'ios' ? 'MainRoute' : 'WelcomeScreen', name: 'Index'}}
renderScene={ this.renderScene.bind(this) }
configureScene={(route) => {
return Navigator.SceneConfigs.FloatFromRight
}} />

使用react-native做一个简单的应用-05 navigator的使用的更多相关文章

  1. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  2. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  3. 用react native 做的一个推酷client

    用react native 做的一个推酷client 仅供大家參考.仅仅为抛砖引玉.希望大家能以此来了解react.并编写出很多其它的优质的开源库,为程序猿做出贡献. 用的的组件: Navigator ...

  4. 如何用 React Native 创建一个iOS APP?

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  5. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  6. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  7. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  8. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  9. Jmeter初步使用二--使用jmeter做一个简单的性能测试

    经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...

  10. 如何用 React Native 创建一个iOS APP?(二)

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

随机推荐

  1. JS生成不重复随机数

    说明 我们可以用Math.random()的方法轻松的生成 一个随机的数字,但是这个数字可能是重复的.有时候,我们需要一个不重复的随机数,可以用很多的方法来实现这个要求,以下方法是效率最高的. 解释 ...

  2. 深入javascript——构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = &q ...

  3. 高级I/O函数(2)-splice函数

    splice函数: 功能描述:用于在两个文件描述符之间移动数据,也是零拷贝操作.函数定义如下: #include <fcntl.h> ssize_t splice(int fd_in,lo ...

  4. Mysql int(11) 和 int(1)

    Mysql 可以为整数类型制定宽度,例如:int(11) ,对大多数应用这是没有意义的:它不会限制值的合法范围,它只是规定了Mysql的一些交互工具(例如mysql命令行客户端)用来显示字符个数.对于 ...

  5. 用Python制作markdown编辑器

    还记得在上篇提到的rest-framework,文档中提到了markdown也是可选应用. 那么这篇我们就来尝试使用markdown来制作一个在线的可以预览的editor. 安装 Python Mar ...

  6. Monkey and Banana(HDU 1069 动态规划)

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. IE查看控件时常

    一.按一下F12 二.找到探查器 三.点击开始配置文件 四.当前视图:改成调用树的形式 然后工具事件去查询 如图:

  8. CentOS终端操作mysql

    1.停用mysql服务:service mysqld stop 重启mysql服务:service mysql restart 2.mysql 1045ERROR:mysqld_safe --user ...

  9. word2pdf

    在网上现在能查到的,并且能通过php调用相关接口,将word转换成pdf文件的有openoffice,访问网址为http://www.openoffice.org/download/index.htm ...

  10. DJANTO之FORM

    文档很仔细,但熟悉要慢慢来~~ from django.shortcuts import render from contact.forms import ContactForm from djang ...