React Native: 那些開始之前應該知道的知識點

React Native 是個非常優秀的項目，不過鑒于其仍處于不斷地演進開發中，我們可能閱讀到的很多的教程里的信息還是面向舊版本的。本文就是記錄了些根據筆者的日常開發總結而來的你應該格外注意而又沒有在文檔中強調的細節要點。我會盡可能地在版本迭代之后更新本文的內容，不過還是要強調下本文編寫于React Native v0.33（2016年9月）。

rnpm link

rnpm 已經被集成到了 react-native 命令行工具中，可以直接通過 react-native link 命令運行。不要單獨的安裝rnpm，它已經被 棄用 了。很多 第三方的插件 乃至于 官方文檔 都沒有提及這點。

自定義字體？你并不需要編輯Android/iOS項目

這一點好像也沒有在文檔之中并沒有詳細提及，不過根據 這里 描述的，我們并不需要編輯Android/iOS項目來添加自定義字體。我們只需要在項目的根目錄下創建新的 assets 文件夾，拖入你所需要用的字體文件，然后在你的 package.json 中添加如下配置:

"rnpm": { "assets": ["assets"] },

然后，執行 react-native link 命令，該命令不僅會將第三方模塊的原生代碼鏈接入Android/iOS項目，還會將字體等文件移動至相應的目錄中。然后你就可以通過設置 fontFamily 來使用安裝好的字體。不過有時候使用 react-native link 并不能如人所愿，此時你可以參考下 react-native-video 這里的一些教程。

另外，需要注意的是目前RN中只支持font-weights與styles為bold與italic，RN會自動搜索yourFamilyName_bold.ttf與 yourFamilyName_italic.ttf。

RN中集成了不少非標準的Babel Plugins

React與RN本身已經集成了不少的Babel Plugins，你的代碼可以直接使用這些Plugins，不過很多文檔中并沒有提及這些Plugins，我覺得了解有哪些Plugins還是很有意義的。

Flow

Flow 是非死book出品的靜態類型的語言，很類似于微軟的 TypeScript 。所謂靜態類型語言即使當你在初始化某個變量的類型之后你并不能再改變它的類型，類似于熟悉的C#、Java等等這些語言，這一特性有助于我們編寫安全可控的代碼。一個簡單的Flow的例子如下所示:

function foo(argument1: string, argument2: number): string {  
    argument1 = 0; // this will fail when running flow
    argument2 = 0; // but this won't!return 1; // this however, will - you guessed it - fail.
}

Flow官網上建議在代碼的首部添加 // @flow ，不過根據測試因為RN中已經內置了合適的Plugins，其可以完成自動的轉化。

ES7 Class Properties

RN內部也已支持 ES7 Class Properties ，也就意味著你不需要寫如下復雜的代碼:

class MyComponent extends Component {  
    constructor(props) {
        super(props);
        this.thisIsAField = 1;
    }
}
MyComponent.propTypes = {  
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
};

而可以寫成這樣:

class MyClass {  
    thisIsAField = 1;
    static propTypes = {
        firstname: React.PropTypes.string,
        lastname: React.PropTypes.string
    };
}

Object Spread Operator

Object Spread Operator 可以使得對象的合并更加方便，類似于Array Spread Operator，我們可以使用 ... 來解構某個對象，譬如:

// Rest propertieslet { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
console.log(x); // 1  
console.log(y); // 2  
console.log(z); // { a: 3, b: 4 }// Spread propertieslet n = { x, y, ...z };  
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

來自：https://segmentfault.com/a/1190000006814388