一下飞机就有亲切感，“我真的有记忆，来过这里。”
留下三个未成年孩子和一对需要长期吃药的古稀老人。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　写在前面
　　以前写 Vue 写惯了，心血来潮，写起了 react。
　　Close2React github 地址：/AppianZ/Close2React
　　项目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 详情具体可见下文的【环境配置】
　　目前该项目有两个分支, half-es6 + master
　　half-es6 和 master 实现的功能一样, 实现了CURD + Axios + Others
　　half-es6的写法并没有完全使用 es6 的 class 的概念, master是完善了它。
　　环境配置
　　写 react 就需要先配置 webpack 还有 jsx
　　首先，新建一个项目，npm init
　　然后在 package 中加入下面这些依赖
　　&dependencies&: { &react&: &^15.4.1&, &react-dom&: &^15.4.1&, }, &devDependencies&: { &axios&: &^0.15.3&, &babel-core&: &^6.18.2&, &babel-loader&: &^6.2.8&, &babel-preset-es2015&: &^6.18.0&, &babel-preset-react&: &^6.16.0&, &babel-preset-react-hmre&: &^1.1.1&, &bootstrap&: &^4.0.0-alpha.2&, &css-loader&: &^0.26.1&, &file-loader&: &^0.9.0&, &html-webpack-plugin&: &^2.24.1&, &node-sass&: &^3.13.0&, &open-browser-webpack-plugin&: &0.0.3&, &sass-loader&: &^4.0.2&, &style-loader&: &^0.13.1&, &url-loader&: &^0.5.7&, &webpack&: &^1.13.3&, &webpack-dev-server&: &^1.16.2& }
　　有两个比较重要的指令
　　&s&: { &dev&: &webpack-dev-server --progress --profile --hot&, &build&: &webpack --progress --profile --colors& }, webpack.config
　　在 webpack 的配置中，我想要的目录结构是横向目录(自创词 ???，即所有 index 页面要用到的东西，包括 sass 和 js 都写在 index 目录下,底下会有目录示意图)，目的是达到，我在 src 下编辑我想要的文件，打包后生成到 public 下去。
　　写在配置最前面的是路径的配置
　　varROOT_PATH = path.resolve(__dirname);
　　varSRC_PATH = path.resolve(ROOT_PATH, 'src');
　　varPUBLIC_PATH = path.resolve(ROOT_PATH, 'Public');
　　配合着入口文件和输出文件的配置
　　entry: { index: path.resolve(SRC_PATH, 'index/index.js'),},output: { path: PUBLIC_PATH, filename: '[name].bundle.js',},
　　主要的插件就是这个html生成的插件和自动打开浏览器的插件，还有babel的配置，不管三七二十一都把他们的等级开到最大
　　plugins: [
　　newHtmlwebpackPlugin({ title: 'My first react-webpack'}),
　　newOpenBrowserPlugin({ url: 'http://localhost:8200'})],babel: { //配置babel&presets&: [ &es2015&, 'stage-0', 'react'],},
　　npm run dev，会自动打开 localhost:8200,就可以在浏览器上看到初始化的页面
　　当你开始要写 js 的时候发现，怎么这么多警告，
　　不用担心 google 一下都能解决。
　　在这里下载 react 和 react-native：
　　并勾选对应项，保存：
　　警告会少很多，但是还是有一些警告，怎么办呢
　　点击这个小灯泡，然后选择 configure
　　把这两项勾选掉，保存，就一片清净了。
　　项目描述
　　Public 是打包后生成的目录，src 是写目录
　　src 采用横向目录结构(自创词 ???)，即所有 index 页面要用到的东西，包括 sass 和 js 都写在 index 目录下。
　　指令运行项目
npm run build 生成打包后的文件
npm run dev
数据绑定 1 文本插值 &span&{text}&
/span&2 html 插值 &div dangerouslySetInnerHTML={{__html:
&&p&balabalabalabala.......&/p&&}} /& 3 属性赋值 &span id = {this.props.idName}&&/span&
　　&span className = &nav-box&&&/span& 4 带 js 表达式的插值 xxx = {三元表达式} &span className={ this.props.idx == this.props.choice? &tab on&: &tab&} && /span&5 事件绑定
　　事件绑定和属性绑定一样
　　// 如果没有使用class继承的写法的话
　　getInitialState() {
　　return{ tabTxt: [ 'CURD', 'Axios', 'Others'], choice: 0, }},switchChoice(idx){
　　this.setState({ choice: idx }) },renderTabInit(text, idx) {
　　return( &Tabkey={idx}idx={idx}choose={this.switchChoice}// 绑定了switchChoice方法
　　choice={this.state.choice}// 数据data的绑定，this.state可以获取到整个state&{text}&/Tab&)},
　　有可能会遇到一些 BOOM 爆炸的 bug，请看「react 父子组件间的事件绑定」。
　　css 和 style 的绑定 1 className className={ this.props.idx == this.props.choice? &tab on&: &tab&} 2 style 第一个括号是插值，第二个括号表示style对象style={{color: '#FEC264', fontSize: '40px'}} 列表渲染 & 条件渲染
　　在 getInitalState 中定义了一个数组 tabTxt
　　getInitialState() {
　　return{ tabTxt: [ 'CURD', 'Axios', 'Others'], choice: 0, } },
　　循环渲染这个子组件，每个子组件有自己的唯一的 key，作用和 track-by（或v-bind:key）的作用类似
　　renderTabInit(text, idx) {
　　return( &Tabkey={idx}idx={idx}choose={this.switchChoice}choice={this.state.choice}&{text}&/Tab&) },
　　列表渲染的 v-for 在 react 中使用map
　　v-if 的条件渲染可用三元，如复杂判断则需要在 return 前写逻辑代码
　　render() {
　　letcurrentPage = null;
　　if( this.state.choice == 0) { currentPage = &PageA/&} else if (this.state.choice == 1){ currentPage = &PageB/&} else { currentPage = &PageC/&} return (
　　&divid=&content&&&divid=&navBox&&{this.state.tabTxt.map(this.renderTabInit)} &/div&&divid=&pageBox&&{currentPage}
　　&/div&&/div&)}表单控件
　　表单组件有几个受用户影响的属性：
　　value，用于 input、textarea 组件
　　checked， 用于类型为 checkbox 或者 radio 的 input 组件
　　selected，用于 option 组件
　　每个表单控件都有一个 onChange 事件用来监听组件的变化:
　　当 input 或 textarea 的value 发生变化时
　　input 的 checked 状态改变时
　　option 的 selected 状态改变时
受限组件 //es5 render: function() { return &input type=&text& value=&Hello!& /&; } // 在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!
　　如果要让用户修改的值有用，则需要：
　　getInitialState() {
　　return{value: 'Hello!'}; }, handleChange(event) {
　　this.setState({value: event.target.value}); }, render() {
　　letvalue = this.state.
　　return&inputtype=&text&value={value}onChange={this.handleChange}/&;} 不受限组件 //es5 render: function() { return ( &div& &input type=&radio& name=&opt& defaultChecked /& Option 1 &input type=&radio& name=&opt& /& Option 2 &select defaultValue=&C&& &option value=&A&&Apple&/option& &option value=&B&&Banana&/option& &option value=&C&&Cranberry&/option& &/select& &/div& ); } // 用户输入将立即反应到元素上。 // 和受限元素一样，使用 onChange 事件可以监听值的变化。 // default 有一个初始值，但这个值用户可以改变并会反应到界面上。 父子组件通信 // 父组件，相当于最大的组件
　　// 子组件是一个tab，和三个page，切换tab 就能切换 page
　　constContent = React.createClass({ getInitialState() {
　　return{ tabTxt: [ 'CURD', 'Axios', 'Others'], choice: 0, // 当前选中的tab下标} }, switchChoice(idx){
　　this.setState({ // 修改state choice: idx }) }, renderTabInit(text, idx) {
　　return( &Tabkey={idx}idx={idx}choice={this.state.choice}// keyidxchoice分别都是作为props传入tab子组件的参数名
　　choose={this.switchChoice}// choose作为props作为传入tab子组件的方法名 &{text}&/Tab&) }, render() { let currentPage = if(this.state.choice == 0) { // 条件判断 currentPage = &PageA/&} else if (this.state.choice == 1){ currentPage = &PageB/&} else { currentPage = &PageC/&} return (
　　&divid=&content&&&divid=&navBox&&{this.state.tabTxt.map(this.renderTabInit)} //循环输出 &/div&&divid=&pageBox&&{currentPage}
　　&/div&&/div&) }});
　　在使用事件绑定 choose={this.switchChoice} 的时候，因为没有采用 class 的学法所以不用 bind
　　class 的写法的时候需要 bind: choose={this.switchChoice.bind(this)}
　　不用 class 的写法的时候不绑定不会导致子组件的 this 指向错误，如果绑定了还会报错（如绑定this会有警告）
　　使用了 class 的写法的时候则需要手动 bind, 这个在文章最后会详细解说
// tab 子组件　　constTab = React.createClass({ chooseTab() { 　　this.props.choose( this.props.idx); //一定要将父组件的方法在子组件中做一个中转}, render(){ 　　return( 　　&spanclassName={this.props.idx==this.props.choice? &tabon& :&tab&} 　　style={{color:'#FEC264', fontSize:'40px'}} 　　data-idx={this.props.idx}onClick={this.chooseTab}// 调用子组件的方法 &{this.props.children}&/span&) }});获取 dom 元素
　　当你的组件还没有挂载在容器上，可以用 this.refs 访问
　　已经挂载完毕，通过 react-dom 提供 findDOMNode 方法拿到组件对应的 dom
　　另外：
　　如果 ref 是设置在原生 HTML 元素上，它拿到的就是 DOM 元素;
　　如果设置在自定义组件上，它拿到的就是组件实例，这时候就需要通过 findDOMNode 来拿到组件的 DOM 元素。
//es5　　varMyComponent = React.createClass({ handleClick: function(){ 　　this.refs.myTextInput.getDOMNode().focus(); // 通过this.refs.xxxxx拿到元素}, render: function(){ 　　return( 　　&div&&inputtype=&text&ref=&myTextInput&/&// 给输入框命名ref &inputtype=&button&value=&Focus the text input&onClick={this.handleClick}/&&/div&); }});几个常用 api componentDidMount componentWillReceiveProps(nextProps) 花一分钟，改成正统的 class 写法 第一步，把所有 createClass 换成 class xxx extends Component。 　　我们用一半的 es6 的姿势写出来的代码如下：　　// half-es6　　import React from 'react'; 　　constList = React.createClass({ // 用createdClass创建一个组件getInitialState() { // 初始化数据state return{ // 在函数的return里定义statestatus: false, } }, // 这里一定写逗号saveLiValue() { // 组件内要调用的functionthis.setState({ status: false}) }, ....}) 　　我们用完整的 es6 的姿势写出来的代码如下：　　// master　　// 利用class姿势的es6　　import React, {Component} from 'react'; 　　classList extends Component{ constructor(props){ super(props); 　　this.state = { status: false, } } // 没有逗号saveLiValue() { 　　this.setState({ status: false}) } ....} 第二步，在父组件中，给所有需要传递给子组件的方法加 bind(this)。
　　这句话有点绕口，但一定要理解。
　　1、第一层意思是在父组件上加 bind(this)
　　2、加的目的是防止子组件在调用方法的时候this指向错误
　　例如下面这个初始化列表的函数　　// half-es6　　// 如果在这种写法下bind(this)，编译后的页面会报警告　　// 大概是说react已经提供了丰富的方法可以避免指向错误，不需要手动bind　　initListLi(val, idx) { 　　return( 　　&List{...val} key={idx}index={idx}handleTxtChange={this.handleTxtChange}handleCheckChange={this.handleCheckChange}deleteItem={this.deleteItem}/&)},render() { return ( 　　&articleclassName=&page&&&h3className=&h3&&List总条数: {this.state.list.length}&/h3&&h3className=&h3&&目前完成条数: {this.state.didCount}&/h3&&ulclassName=&ul&&{ this.state.list.map(this.initListLi) } 　　&/ul&&AddaddLiItem={this.addLiItem}/&&/article&)}　　但是使用了 class 的写法之后，就可能会出现警告说 props 是 null　　这个时候就需要手动 bind(this)　　// master　　// es6的class写法下的函数的事件绑定，　　// 如果子组件会需要调用函数，则在父组件中手动向子组件中bind(this)initListLi(val, idx) { 　　return( 　　&List{...val} key={idx}index={idx}// 以下三个方法都是在向List组件中绑定thishandleTxtChange={this.handleTxtChange.bind(this)}handleCheckChange={this.handleCheckChange.bind(this)}deleteItem={this.deleteItem.bind(this)}/&)}render() { return ( 　　&articleclassName=&page&&&h3className=&h3&&List总条数: {this.state.list.length}&/h3&&h3className=&h3&&目前完成条数: {this.state.didCount}&/h3&&ulclassName=&ul&&{ this.state.list.map(this.initListLi.bind(this)) //子组件中会需要调用函数 } 　　&/ul&&AddaddLiItem={this.addLiItem.bind(this)}/&&/article&)}写在后面 　　Close2React github 地址：/AppianZ/Close2React　　我是嘉宝 Appian，一个卖萌出家的算法妹纸。　　【以往热门文章推荐】
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：基础篇章：关于 React Native 之 Navigator 组件的讲解 - 推酷
基础篇章：关于 React Native 之 Navigator 组件的讲解
今天我们来讲讲Navigator这个小家伙，呃……不能说小家伙，因为它还是很厉害的，有了它我就就能实现各个界面的跳转和切换。所以它的名字叫导航器。来，今天我们就一起来学习学习它。
使用我Navigator可以让你们实现在应用内不同页面的切换，我是用JavaScript实现的，而且我有两个：IOS和Android，如果在IOS上使用请用我的双胞胎兄弟NavigatorIOS，因为它充分利用本地的UIKit导航。
要想设置Navigator，使用我，你们必须确定一个或多个调用routes对象，去定义每个场景。你们还可以利用renderScene方法，导航栏可以根据指定的路由来渲染场景。
官网基础小例子
render() {
constroutes = [
{title:'First Scene',index:0},
{title:'Second Scene',index:1},
&Navigator
initialRoute={routes[0]}
initialRouteStack={routes}
renderScene={(route,navigator) =&
&TouchableHighlightonPress={()=&{
if (route.index === 0) {
navigator.push(routes[1]);
navigator.pop();
&Text&Hello {route.title}!&/Text&
&/TouchableHighlight&
style={{padding: 100}}
nitialRoute
在上面的示例中，initialRoute 用于指定的第一个路由。它包含一个标题属性，标识路由。RenderScene 属性返回一个函数，显示路由标题文本。
initialRouteStack
initialRoute指定第一个显示的页面，而要设置多个场景，你们通过initialRouteStack属性了。通过上面例子，我们可以看到定义了两个路由，而且每个路由都有一个用于管理被渲染场景的索引属性。在renderScene方法中有一个触摸事件，触摸决定导航器是推或者弹出哪个导航场景。
Navigation Bar
我们可以在Navigator上设置标题导航栏Navigation Bar，在标题导航栏中我们可以通过routeMapper属性去设置左，右和标题导航栏。在配置左，右，和标题导航栏项目，您可以访问信息，如当前路由对象和导航状态。这使您可以为每个场景自定义标题以及按钮。例如，您可以选择隐藏场景中的左键。
例子如下：
&Navigator
renderScene={(route, navigator) =&
navigationBar={
&Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) =&
{ return (&Text&Cancel&/Text&); },
RightButton: (route, navigator, index, navState) =&
{ return (&Text&Done&/Text&); },
Title: (route, navigator, index, navState) =&
{ return (&Text&Awesome Nav Bar&/Text&); },
style={{backgroundColor: 'gray'}}
要想改变场景的动画和转换,相当于我们Android中的进场和转场动画，我们可以通过configureScene属性来获得对于给定路线的配置对象。如下：
&Navigator
renderScene={(route, navigator) =&
configureScene={(route, routeStack) =&
Navigator.SceneConfigs.FloatFromBottom}
configureScene function 就是通过它配置场景转换的。它有如下属性：
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
initialRoute object 定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。
initialRouteStack [object] 存放路由的一个数组
navigationBar node 上面介绍了
navigator object
onDidFocus function 每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由
onWillFocus function 会在导航切换之前调用，参数为目标路由
renderScene function 用来渲染每一个路由指定的页面
sceneStyle 样式风格
immediatelyResetRouteStack(nextRouteStack) 用新的路由数组来重置路由栈
jumpTo(route) 跳转到传入的已有的场景并且不卸载
jumpForward(0) 跳转到下一个场景
jumpBack(0) 同上相反的意思
push(route) 跳转到新的场景，并且将场景入栈，你可以稍后用jump forward 跳转回去
popN(n) 回到&场景一次。当N = 1，行为相匹配pop（）方法。当N是无效的（负或大于当前的路线计算），什么也不做。
pop(0) 跳转回去并且卸载掉当前场景
replaceAtIndex(route, index, cb) 替换掉指定序列的路由场景
replace(route) 用一个新路由替换当前场景
replacePrevious(route) 替换掉之前的场景
popToTop(0) pop到栈中的第一个场景，卸载掉所有的其他场景
popToRoute(route) pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载
replacePreviousAndPop(route) 取代之前的场景，并弹出它
resetTo(route) 跳转到指定的新场景，并重置路由栈
getCurrentRoutes() 获取当前栈里的路由
怎么样？我的样子很帅吧，是不是很想和我玩，那就赶紧行动起来吧，我已经迫不及待的想跟你们一起玩了。来看看怎么和我玩的实例代码吧。
importReact, { Component }from'react';
AppRegistry,
StyleSheet,
Navigator,
TouchableHighlight,
TouchableOpacity,
} from'react-native';
NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(route.id ==='first') {
previousRoute = navState.routeStack[index - 1];
&TouchableOpacity
onPress={()=& navigator.pop()}
style={styles.navBarLeftButton}&
&Imagesource={require('./back.png')}style={styles.backImage}&
&/TouchableOpacity&
RightButton(route, navigator, index, navState) {
if(route.id ==='second') {
&TouchableOpacity
onPress={()=& navigator.push({id:'second',title:'第二页',data:&我是从第一页跳转过来的&})}
style={styles.navBarRightButton}&
&Textstyle={[styles.navBarButtonText]}&
&/TouchableOpacity&
Title(route, navigator, index, navState) {
&Textstyle={[styles.navBarTitleText]}&
{route.title}
exportdefaultclassNavigatorDemoextendsComponent{
&Navigator
style = {styles.container}
initialRoute={{id:&first&,title:&第一页&}}
renderScene={this.renderNav}
configureScene={(route, routeStack) =& Navigator.SceneConfigs.HorizontalSwipeJump}
navigationBar={
&Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={{backgroundColor:'white'}}
renderNav(route,nav){
switch (route.id) {
case 'first':
return &FirstScreen navigator={nav} title=&第一页&/ &;
case 'second':
return (&SecondScreen navigator={nav} title=&第二页& data={route.data}/&);
class FirstScreen extends Component{
toSecond=()=&{
this.props.navigator.push({id:&second&,title:&第二页&,data:&我是第二页&});
&View style={styles.firstView}&
&TouchableHighlight
style={{padding:10}}
onPress={this.toSecond}
underlayColor=&blue&&
&Text style={styles.contentText}&第一页&/Text&
&/TouchableHighlight&
class SecondScreen extends Component{
toFirst=()=&{
this.props.navigator.pop();
&View style={styles.secondView}&
&TouchableHighlight
style={{padding:10}}
onPress={this.toFirst}
underlayColor=&red&&
&Text style={styles.contentText}&{this.props.data}&/Text&
&/TouchableHighlight&
const styles = StyleSheet.create({
backImage:{
height:30,
navBarTitleText: {
color: 'black',
fontWeight: '500',
marginTop:20,
navBarLeftButton: {
paddingLeft: 10,
paddingTop:15,
navBarRightButton: {
paddingRight: 10,
paddingTop:20,
navBarButtonText: {
color: '#5890FF',
container: {
firstView:{
backgroundColor:'red',
justifyContent: 'center',
secondView:{
justifyContent: 'center',
backgroundColor:'blue',
contentText:{
fontSize:22,
color:'white',
textAlign:'center',
AppRegistry.registerComponent('NavigatorDemo', () =& NavigatorDemo);
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致React Native 篇之 自定义组件、引入组件、页面跳转
& & 通常学习一门新的语言的时候，特别是前端开发，最怕的就是在一个页面堆积代码。
& & 当开始学习RN（React Native的简称），各种demo练习，各种抄，各种啪啪啪，这个问题也就自然而然的暴露了出来，满满一大篇鸡肠子，自己看着都恶心！！！
& & 感觉写那些博客或是书的人是故意的，无非就是想引出-——如何用组件的方式开发。类似于iOS里面类的封装。
& &各种翻书之后，小白终于找到解决办法。请看下文：
& &1.新建一个js文件：command+n 命名为 ——MoreController.js 保存到index.ios.js 同一根目录下
& & &也就是,创建一个组件
& & MoreController.js 代码如下:
& 'use strict';
& var React = require('react-native');
& & AppRegistry,
& & StyleSheet,
& var MoreViewController = React.createClass({
& & render() {
& & & return(
& & & & &View style={[styles.scene, {backgroundColor:'#FFF1E8'}]}&
& & & & & &&Text&You came here from the &right& button!&/Text&
& & & & &/View&
& var styles = ({
& & & scene: {
& & & & padding: 10,
& & & & paddingTop: 74,
& & & & flex:1,
// 最重要的一段代码：将这个视图控制器添加到组件模块中去
& module.exports = MoreViewC& &&
& & &2.下面是本文的第二个重点: 使用组件
& & &index.ios.js 代码中：
& & // 表示引入其他相关模块& & &
& & // 表示引入其他相关模块
& & &var React = require('react-native');
& & &var MoreViewController = require('./MoreViewController'); & & &// 这个就是引入我们上面自定义的组件
& & &var TouchViewController = require('./TouchViewController');& &&
& & &详细代码请看:
'use strict';
// 表示引入其他相关模块
var React = require('react-native');
var MoreViewController = require('./MoreViewController');
var TouchViewController = require('./TouchViewController');
// 语法糖... 呵呵 真的像个包着纸的糖！！！
// 使用 Rect.AppR Rect.T...
& AppRegistry,
& StyleSheet, & // 负责样式
& NavigatorIOS,
& TouchableHighlight,
& component,
// 创建一个类： Rect.createClass()
// 注意不能在标签内写注释
var NavDemo = React.createClass({
& onRightButtonPress: function(){
& & &this.refs.nav.push({
& & & &title: 'From Right',
& & & &component: MoreViewController, & & //使用MoreViewController
& render() {
& & return (
& & & &NavigatorIOS ref=&nav&
& & & & style={styles.container}
& & & & initialRoute={{
& & & & & component: HomeScene, & & & //在NavigatorIOS中的第一个组件，此例子中就是HomeScene
& & & & & title: 'NavigatorIOS Demo..', //导航栏的标题
& & & & & rightButtonTitle: 'MORE!', &//导航栏右键的按钮标题
& & & & & onRightButtonPress: this.onRightButtonPress, //点击右边按钮触发的函数
& & & & }}&
& & & &/NavigatorIOS&
var HomeScene = React.createClass({
& onPress() {
& & this.props.navigator.push({
& & & title:'From TouchableHightlight',
& & & component: TouchViewController,
& render() {
& & return(
& & & &View style={[styles.scene, {backgroundColor: '#DAF6FF'}]}&
& & & & &&TouchableHighlight onPress={this.onPress}&
& & & & & & &Text&Welcome to the NavigatorIOS Demo. Press here!&/Text&
& & & & &&/TouchableHighlight&
& & & &/View&
// View样式css
var styles = StyleSheet.create({
& container: {
& & flex: 1,
& scene: {
& & padding: 10,
& & paddingTop: 74,
& & flex:1,
// 注册应用入口
AppRegistry.registerComponent('NavDemo', () =& NavDemo);
// 红色NavDemo是对外暴露的程序如何组件名称，你会在xcode appDelegate中看到注册的组件名就是这个，这个名字可以任意起，但是appDelegate里面一定要对应上。
// 绿色NavDemo是我们上文使用类方法创建的组件名称这个是不能改的，固定的。
3. AppDelegate中代码：
& RCTRootView *rootView = [[RCTRootView
alloc] initWithBundleURL:jsCodeLocation
& & & & & & & & & & & & & & & & & & & & & & & & & & &
moduleName:@&NavDemo& & // 这个就是那个红色标注的NavDemo
&& & & & & & & & & & & & & & & & & & & & & & & initialProperties:nil
&& & & & & & & & & & & & & & & & & & & & & & & & & launchOptions:launchOptions];
Mark ——下篇博文讲React Native 项目运行的两种种方式 ：1.真机； 2.模拟器；以及本地打包调试加载方式和网络接口调试方式；
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？