React-Native入門指南（二）——代碼結構

React-Native入門指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript開發你的原生應用，釋放Native的UI體驗，體驗 Hybird開發效率。

最近一個星期寫的文章以下，連接是github page的，其實也能夠在系列博客找到相應文章：

• Lession1: Hello React-Native
• Lession2: 認識代碼結構
• Lession3: css和佈局
• Lession4: 學會React-Native佈局（一）
• Lession5: 學會React-Native佈局(二)
• Lession6: UI組件
• Lession7: JSX在React-Native中的應用

還有幾篇會時刻更新：

• Lession8: 本身動手寫組件
• Lession9: 模塊化開發
• Lession10: 搭建項目架構
• Lession11: 源碼分析

第2篇代碼結構

1、瞭解index.ios.js

你們都清楚，React-Native就是在開發效率和用戶體驗間作的一種權衡。React-native是使用JS開發，開發效率高、發佈能力強，不只擁有hybrid的開發效率，同時擁有native app相媲美的用戶體驗。目前天貓也在這塊開始試水。
用編輯器打開index.ios.js文件，分析代碼結構：
一、第一句：var React = require('react-native');有Node.js開發經驗的同窗都清楚，require能夠引入其餘模塊。若是沒有node.js開發經驗的同窗，能夠腦補下java的import和c++的#include。
二、第二句代碼，批量定義組件：
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;
其實，這只是一個語法糖而已，好比AppRegistry咱們能夠這樣定義：var AppRegistry = React.AppRegistry;
三、構建Heollo World入口類。React提供了React.createClass的方法建立一個類。裏面的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。其實這是JSX的模板語法，能夠提早學習下。
四、相對於web開發，咱們須要提供視圖的樣式，那麼StyleSheet.create就是幹這件事的，只是用JS的自面量表達了css樣式。
五、如何引入css樣式？其實在render方法返回的視圖模板裏已經體現出來了，即style={styles.container}.其中style是視圖的一個屬性，styles是咱們定義的樣式表，container是樣式表中的一個樣式。
六、註冊應用入口，這個必定不能少，不然模擬器會提示報錯：
    AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

2、其實你還須要看點這方面的知識

對於React-Native開發，僅僅有基礎前端開發的知識是不夠的，你還須要瞭解和掌握的有：

• Node.js基礎
• JSX語法基礎
• Flexbox佈局

3、目前須要關注的文件

一、目前階段有幾個文件時須要注意下的：
（1）在xcode項目代碼中AppDelegate.m會標識入口文件，例如：
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
若是是網上下載別人的源碼，注意此處的ip和端口是否有被修改。
（2）閃屏界面在哪修改？在xcode項目中找到LaunchScreen.xib文件，點擊，你會看到界面，這個就是啓動界面，你手動添加組件或者修改文本便可，最好了解下xcode的使用。
（3）文本編輯器打開index.ios.js文件，是js代碼的入口文件，全部的代碼編寫從這開始，能夠定義本身的模塊和引入第三方模塊。

4、修改文件index.ios.js

一、修改啓動界面，以下圖

二、添加圖片和修改樣式.咱們在第一篇的demo基礎上修改。去掉第二個和第三個<Text>,增長咱們須要的圖片，由於圖片更具表達力，就像最近的圖片社交應用很火同樣。
(1)添加Image組件，將代碼修改爲以下便可：
var {
    StyleSheet,
    Text,
    View,
    Image,
} = React;
（2）將render返回中的模版增長Image組件視圖，具體以下：
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                React-Native入門學習
            </Text>
            <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
            </Image>
        </View>
    );
}
其中，Image標籤的source的第一個大括號是模板，第二個大括號是js對象，js對象裏面有個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開啓模擬器，你會發現啓動界面和首頁都你想要的樣子：

若是終端被關閉了怎麼辦

不用擔憂，其實只要你切到項目的根目錄，命令行輸入npm start便可，這樣便可開發終端監聽。實際上也是node.js的監聽服務開啓而已。以下圖表示成功。