第2篇代碼結(jié)構(gòu)

一、了解index.ios.js

大家都清楚，React-Native就是在開發(fā)效率和用戶體驗(yàn)間做的一種權(quán)衡。React-native是使用JS開發(fā)，開發(fā)效率高、發(fā)布能力強(qiáng)，不僅擁有hybrid的開發(fā)效率，同時(shí)擁有native app相媲美的用戶體驗(yàn)。目前天貓也在這塊開始試水。
用編輯器打開index.ios.js文件，分析代碼結(jié)構(gòu)：
1、第一句：var React = require('react-native');有Node.js開發(fā)經(jīng)驗(yàn)的同學(xué)都清楚，require可以引入其他模塊。如果沒有node.js開發(fā)經(jīng)驗(yàn)的同學(xué)，可以腦補(bǔ)下java的import和c++的#include。
2、第二句代碼，批量定義組件：
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;
其實(shí)，這只是一個(gè)語法糖而已，比如AppRegistry我們可以這樣定義：var AppRegistry = React.AppRegistry;
3、構(gòu)建Heollo World入口類。React提供了React.createClass的方法創(chuàng)建一個(gè)類。里面的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。其實(shí)這是JSX的模板語法，可以提前學(xué)習(xí)下。
4、相對于web開發(fā)，我們需要提供視圖的樣式，那么StyleSheet.create就是干這件事的，只是用JS的自面量表達(dá)了css樣式。
5、如何引入css樣式？其實(shí)在render方法返回的視圖模板里已經(jīng)體現(xiàn)出來了，即style={styles.container}.其中style是視圖的一個(gè)屬性，styles是我們定義的樣式表，container是樣式表中的一個(gè)樣式。
6、注冊應(yīng)用入口，這個(gè)一定不能少，否則模擬器會(huì)提示報(bào)錯(cuò)：
    AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

二、其實(shí)你還需要看點(diǎn)這方面的知識(shí)

對于React-Native開發(fā)，僅僅有基礎(chǔ)前端開發(fā)的知識(shí)是不夠的，你還需要了解和掌握的有：

• Node.js基礎(chǔ)
• JSX語法基礎(chǔ)
• Flexbox布局

三、目前需要關(guān)注的文件

1、目前階段有幾個(gè)文件時(shí)需要注意下的：
（1）在xcode項(xiàng)目代碼中AppDelegate.m會(huì)標(biāo)識(shí)入口文件，例如：
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
如果是網(wǎng)上下載別人的源碼，注意此處的ip和端口是否有被修改。
（2）閃屏界面在哪修改？在xcode項(xiàng)目中找到LaunchScreen.xib文件，點(diǎn)擊，你會(huì)看到界面，這個(gè)就是啟動(dòng)界面，你手動(dòng)添加組件或者修改文本即可，最好了解下xcode的使用。
（3）文本編輯器打開index.ios.js文件，是js代碼的入口文件，所有的代碼編寫從這開始，可以定義自己的模塊和引入第三方模塊。

四、修改文件index.ios.js

1、修改啟動(dòng)界面，如下圖

http://wiki.jikexueyuan.com/project/react-native-lesson/images/2_1.png" alt="啟動(dòng)界面" />

2、添加圖片和修改樣式.我們在第一篇的demo基礎(chǔ)上修改。去掉第二個(gè)和第三個(gè)<Text>,增加我們需要的圖片，因?yàn)閳D片更具表達(dá)力，就像最近的圖片社交應(yīng)用很火一樣。
(1)添加Image組件，將代碼修改成如下即可：
var {
    StyleSheet,
    Text,
    View,
    Image,
} = React;
（2）將render返回中的模版增加Image組件視圖，具體如下：
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                React-Native入門學(xué)習(xí)
            </Text>
            <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
            </Image>
        </View>
    );
}
其中，Image標(biāo)簽的source的第一個(gè)大括號(hào)是模板，第二個(gè)大括號(hào)是js對象，js對象里面有個(gè)key是uri,表示圖片的地址。
（3）修改圖片視圖的樣式，刪除多余的樣式，增加pic樣式：
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'red',
    },
    pic: {
        width:100,
        height:100,
    }
});
（4）可以cmd + Q 停止模擬器，然后再cmd + R開啟模擬器，你會(huì)發(fā)現(xiàn)啟動(dòng)界面和首頁都你想要的樣子：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/2_2.png" alt="首頁" />

如果終端被關(guān)閉了怎么辦

 不用擔(dān)心，其實(shí)只要你切到項(xiàng)目的根目錄，命令行輸入npm start即可，這樣即可開發(fā)終端監(jiān)聽。實(shí)際上也是node.js的監(jiān)聽服務(wù)開啟而已。如下圖表示成功。

http://wiki.jikexueyuan.com/project/react-native-lesson/images/2_3.png" alt="npm start" />