《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码

1.5 小试牛刀——更改React Native项目源码
　　应用虽然已经运行起来了，但是到现在还没有看到或修改任何代码，读者是不是觉得意犹未尽呢？下面就来看看React Native项目的源码吧。
　　打开index.ios.js文件，可以看到与显示在设备上内容直接相关的代码：

01 export default class ch02 extends Component { // 每个页面可以理解成一个组件
02 render() { // 渲染页面的函数
03 return (
04 // 页面根View
05
06 Welcome to React Native!
07
08
09 To get started, edit index.ios.js
10
11
12 Press Cmd+R to reload,{'n'}
13 Cmd+D or shake for dev menu
14
15
16 );
17 }
16 }

　　为了证实我们的想法，将代码中的文本内容从“Welcome to React Native!”修改为“我的第一个React Native应用！”，然后在iOS模拟器中使用快捷键command + R重新加载应用，果然界面更新了！如图1.25所示。

图1.25 修改文本内容后的效果
?提示：如果已经打开了Enable Live Reload调试选项，就不需要手动重新加载应用了，修改完代码直接可以看到效果。
　　接着，再来看看显示样式的代码：

01 const styles = StyleSheet.create({
02 container: { // 页面根View的样式
03 flex: 1,
04 justifyContent: 'center',
05 alignItems: 'center',
06 backgroundColor: '#F5FCFF'
07 },
08 welcome: { // “欢迎”文本的样式
09 fontSize: 20,
10 textAlign: 'center',
12 margin: 10
12 },
13 instructions: { // “说明”文本的样式
14 textAlign: 'center',
15 color: '#333333',
16 marginBottom: 5
17 }
18 });

　　在welcome样式中添加color: 'red'属性：

01 welcome: {
02 fontSize: 20,
03 textAlign: 'center',
04 margin: 10,
05 color: 'red' // 也可以用RGB值'#FF0000'来表示红色
06 },
?注意：第一次编写React Native代码时很容易发生遗漏逗号“,”等拼写错误。
　　重新加载应用后，效果如图1.26所示。
　　以上是iOS App的运行效果，同样也可以对index.android.js文件做类似的修改，重新加载Android App效果如图1.27所示。

![image](https://yqfile.alicdn.com/fc1f4dfde2596fe9f64cd06b9034d24f387c5ce4.png)

图1.26  修改文字颜色后效果    图1.27  Android App运行的效果

?提示：实际开发中，index.io.js和index.android.js往往复用相同的逻辑，即将相同的代码提取到公共文件中，这样就可以大大发挥React Native的跨平台优势。