（转）第2篇代码结构

第2篇代码结构

一、了解index.ios.js

大家都清楚&＃xff0c;React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发&＃xff0c;开发效率高、发布能力强&＃xff0c;不仅拥有hybrid的开发效率&＃xff0c;同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。
用编辑器打开index.ios.js文件&＃xff0c;分析代码结构&＃xff1a;
1、第一句&＃xff1a;var React &＃61; require(&＃39;react-native&＃39;);有Node.js开发经验的同学都清楚&＃xff0c;require可以引入其他模块。如果没有node.js开发经验的同学&＃xff0c;可以脑补下java的import和c&＃43;&＃43;的#include。
2、第二句代码&＃xff0c;批量定义组件&＃xff1a;
var {
AppRegistry,
StyleSheet,
Text,
View,
} &＃61; React;
其实&＃xff0c;这只是一个语法糖而已&＃xff0c;比如AppRegistry我们可以这样定义&＃xff1a;var AppRegistry &＃61; React.AppRegistry;
3、构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法&＃xff0c;可以提前学习下。
4、相对于web开发&＃xff0c;我们需要提供视图的样式&＃xff0c;那么StyleSheet.create就是干这件事的&＃xff0c;只是用JS的自面量表达了css样式。
5、如何引入css样式&＃xff1f;其实在render方法返回的视图模板里已经体现出来了&＃xff0c;即style&＃61;{styles.container}.其中style是视图的一个属性&＃xff0c;styles是我们定义的样式表&＃xff0c;container是样式表中的一个样式。
6、注册应用入口&＃xff0c;这个一定不能少&＃xff0c;否则模拟器会提示报错&＃xff1a;
AppRegistry.registerComponent(&＃39;HelloWorld&＃39;, () &＃61;> HelloWorld);


二、其实你还需要看点这方面的知识

对于React-Native开发&＃xff0c;仅仅有基础前端开发的知识是不够的&＃xff0c;你还需要了解和掌握的有&＃xff1a;


• Node.js基础
• JSX语法基础
• Flexbox布局

三、目前需要关注的文件

1、目前阶段有几个文件时需要注意下的&＃xff1a;
&＃xff08;1&＃xff09;在xcode项目代码中AppDelegate.m会标识入口文件&＃xff0c;例如&＃xff1a;
jsCodeLocation &＃61; [NSURL URLWithString:&＃64;"http://localhost:8081/index.ios.bundle"];
如果是网上下载别人的源码&＃xff0c;注意此处的ip和端口是否有被修改。
&＃xff08;2&＃xff09;闪屏界面在哪修改&＃xff1f;在xcode项目中找到LaunchScreen.xib文件&＃xff0c;点击&＃xff0c;你会看到界面&＃xff0c;这个就是启动界面&＃xff0c;你手动添加组件或者修改文本即可&＃xff0c;最好了解下xcode的使用。
&＃xff08;3&＃xff09;文本编辑器打开index.ios.js文件&＃xff0c;是js代码的入口文件&＃xff0c;所有的代码编写从这开始&＃xff0c;可以定义自己的模块和引入第三方模块。


四、修改文件index.ios.js

1、修改启动界面&＃xff0c;如下图


2、添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个,增加我们需要的图片&＃xff0c;因为图片更具表达力&＃xff0c;就像最近的图片社交应用很火一样。
(1)添加Image组件&＃xff0c;将代码修改成如下即可&＃xff1a;
var {
StyleSheet,
Text,
View,
Image,
} &＃61; React;
&＃xff08;2&＃xff09;将render返回中的模版增加Image组件视图&＃xff0c;具体如下&＃xff1a;
render: function() {
return (


React-Native入门学习




);
}
其中&＃xff0c;Image标签的source的第一个大括号是模板&＃xff0c;第二个大括号是js对象&＃xff0c;js对象里面有个key是uri,表示图片的地址。
&＃xff08;3&＃xff09;修改图片视图的样式&＃xff0c;删除多余的样式&＃xff0c;增加pic样式&＃xff1a;
var styles &＃61; StyleSheet.create({
container: {
flex: 1,
justifyContent: &＃39;center&＃39;,
alignItems: &＃39;center&＃39;,
backgroundColor: &＃39;#F5FCFF&＃39;,
},
welcome: {
fontSize: 20,
textAlign: &＃39;center&＃39;,
margin: 10,
color: &＃39;red&＃39;,
},
pic: {
width:100,
height:100,
}
});
&＃xff08;4&＃xff09;可以cmd &＃43; Q 停止模拟器&＃xff0c;然后再cmd &＃43; R开启模拟器&＃xff0c;你会发现启动界面和首页都你想要的样子&＃xff1a;


如果终端被关闭了怎么办

不用担心&＃xff0c;其实只要你切到项目的根目录&＃xff0c;命令行输入npm start即可&＃xff0c;这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。