《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

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所示。

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