1.5 小试牛刀——更改React Native项目源码 应用虽然已经运行起来了，但是到现在还没有看到或修改任何代码，读者是不是觉得意犹未尽呢？下面就来看看React Native项目的源码吧。 打开index.ios.js文件，可以看到与显示在设备上内容直接相关的代码：
01 export default class ch02 extends Component { // 每个页面可以理解成一个组件02 render() { // 渲染页面的函数03 return (04 // 页面根View05 06 Welcome to React Native!07 08 09 To get started, edit index.ios.js10 11 12 Press Cmd+R to reload,{'n'}13 Cmd+D or shake for dev menu14 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: 1012 },13 instructions: { // “说明”文本的样式14 textAlign: 'center',15 color: '#333333',16 marginBottom: 517 }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所示。
 图1.26 修改文字颜色后效果 图1.27 Android App运行的效果?提示：实际开发中，index.io.js和index.android.js往往复用相同的逻辑，即将相同的代码提取到公共文件中，这样就可以大大发挥React Native的跨平台优势。
相关资源：REACT NATIVE跨平台移动应用开发-第2版-高清版-完整目录-2017年5月