1.基本規範

    React Native 要儘可能的使用ES6語法。
    console在除錯時寫，除錯完立即刪除。
2.命名規範

檔名稱：
    檔名要使用大駝峰命名法,比如 HomeIndex.js;
    通用的元件放在Component資料夾。入口檔案要明確，一般可以使用index.js。
    React Native中如果僅有android/ios其中一端的功能,在檔案的尾加.android/.ios,
    比如：KeyBoard.android.js和KeyBoard.ios.js。杜絕1、2、3、one、two、three之類名稱,用功能或者是模組來命名。
    呼叫原生android/ios都寫在同一個.js檔案內，如果是Dialog之類的用途廣泛的，可放在BaseView資料夾上，否則放在Action對應的業務資料夾內。

3.屬性

    3.1 屬性名

        元件的屬性使用小駝峰命名法。
        使用外聯樣式時,屬性名最好帶有Style關鍵字。比如:flexStyle.js
    3.2屬性設定

        在封裝的元件內一定要設定屬性(以便propTypes校驗),不要在外部改變屬性的值。
        屬性較多使用{...this.props}語法。(最好在屬性開頭加上{...this.props},為了防止少寫屬性,產生報錯)
        如果重複設定屬性值時,前面的值會被後面的覆蓋。
    3.3屬性對齊方式

        屬性較少時可以行內排列
        屬性較多時每行一個屬性,閉合標籤單獨成行
    3.4行內迭代

        運算邏輯簡單的直接使用行內迭代。
        return (
          <div>
            {this.props.data.map((data, i) => {
              return (<Component data={data} key={i} />)
            })}
          </div>
        );
4.註釋

    元件之間的註釋需要用 {/ 註釋內容 /} 包裹。
    var content = (
        <Nav>
            {/* child comment, put {} around */}
            <Person
                /* multi
                   line
                   comment */
                name={window.isLoggedIn ? window.name : ''} // end of line comment
            />
        </Nav>
    );
5.引號使用

    HTML/JSX 屬性使用雙引號 "；
    JS 使用單引號 '；

    // bad
    <Foo bar='bar' />
    // good
    <Foo bar="bar" />

    // bad
    <Foo style={{ left: "20px" }} />
    // good
    <Foo style={{ left: '20px' }} />

    // JavaScript Expression
    const person = <Person name={window.isLoggedIn ? window.name : ''} />;

    // HTML/JSX
    const myDivElement = <div className="foo" />;
    const app = <Nav color="blue" />;
    const content = (
    <Container>
      {window.isLoggedIn ? <Nav /> : <Login />}
    </Container>
    );
6. 條件 HTML

    6.1簡短的輸出在行內直接三元運算子；

        {this.state.show && 'This is Shown'}
        {this.state.on ? 'On' : 'Off'}
    6.2較複雜的結構可以在 .render()方法內定義一個以 Html結尾的變數。

        var dinosaurHtml = '';
        if (this.state.showDinosaurs) {
            dinosaurHtml = (
                <section>
                    <DinosaurTable />
                    <DinosaurPager />
                </section>
            );
         }
         return ( <div> ... {dinosaurHtml} ... </div>);

    7.() 使用

        7.1多行的 JSX 使用 () 包裹，有元件巢狀時使用多行模式；

            // bad
            return (<div><ComponentOne /><ComponentTwo /></div>);
            // good
            var multilineJsx = (
                <header>
                    <Logo />
                    <Nav />
                </header>
            );
        7.2單行 JSX 省略 ()。

            var singleLineJsx = <h1>Simple JSX</h1>;
            // good, when single line
            render() {
                const body = <div>hello</div>;
                return <MyComponent>{body}</MyComponent>;
            }
8.自閉合標籤

    8.1JSX 中所有標籤必須閉合；

    沒有子元素的元件使用自閉合語法，自閉合標籤 / 前留一個空格。
    // bad
    <Logo></Logo>
    <Logo/>

    // very bad
    <Foo    />

    // bad
    <Foo
    />

    // good
    <Logo />
9.元件內部程式碼組織

    9.1不要使用下劃線字首命名 React 元件的方法；
        // bad
        React.createClass({
            _onClickSubmit() {
              // do stuff
            }
            // other stuff
        });

        // good
        React.createClass({
            onClickSubmit() {
              // do stuff
            }
            // other stuff
        });
    9.1按照生命週期組順序織元件的方法、屬性；

        方法（屬性）之間空一行,繪製頁面的方法寫在生命週期後render前，其他方法寫在render後

        例如：
        import React, { Component } from 'react';
        import {
            AppRegistry,
            StyleSheet,
            Text,
            View
        } from 'react-native';

        export default class Login extends Component {
            // 構造
            constructor(props) {
                super(props);
                // 初始狀態
                this.state = {};
            }

            componentWillMount() {}

            componentDidMount() {}

            componentWillReceiveProps() {}

            shouldComponentUpdate() {}

            shouldComponentUpdate() {}

            componentWillUpdate() {}

            componentDidUpdate() {}

            componentWillUnmount() {
                // do something: remove DOM event listener. etc.
            }

            renderHeader (){
                // render some view;
            }

            renderFooter (){}

            render() {}

            handleClick(){
                // do something: onClick
            }
        }

        const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
        });

        AppRegistry.registerComponent('Login', () => Login);