Chapter8: React native

This section contain the following items:

1) Building Development environment (For OS X)

2) Building Sublime environment (for ES6)

3) React-native es6模組的寫法

4) ES6 Promise

4) 風格樣式, 排版

5) 行動元件

6) 平台API

1.Building Development environment (For OS X)

command:
- sudo brew install node
- sudo brew install watchman
- sudo brew install flow
- brew update (盡量不要用)
- brew upgrade (盡量不要用)

Android Enviroment

Install JDK:

 brew install android-sdk
 export ANDROID_HOME=/usr/local/opt/android-sdk
 -> 這段可用Android Studio取代比較安全, 比較順

open Android SDK manager:

    sudo android
    Install Android SDK builexusd-tools version 23.0.1
    Install Android 6.0
    Install Android Support Library

Create and Launch android simulator:

    sudo android avd, create a instance (ex. nexus)
    Start instance
    react-native run-android

2.Building Sublime environment (for ES6)

Save react-native project as .sublime-project file, add following string to disable jshint:

{
    "SublimeLinter":{
      "linters":{
        "eslint":{
            "excludes":[
                "dist/*",
                "node_modules/*"
            ]
        },
        "jshint":{
            "@disable":true
        }
      }
    }
  }

Install "babel-sublime" plugin
Install "babel snippets" plugin
Install "SublimeLinter-contrib-eslint" plugin
npm install -g eslint babel-eslint eslint-plugin-react
npm install -g jsxhint
To set Babel as the default syntax highlighter for JS files, open a .js (or .jsx) file and choose View > Syntax > Open all with current extension as.. > Babel > JavaScript (Babel)
Color Scheme: Preferences -> Color Scheme -> Babel

Configure jsFormat

  edit Preference-> Package Settings-> JsFormat-> Settings-User, paste:
      {
        "e4x": true,
        // jsformat options
        "format_on_save": true,
      }

Create a eslint.rc file to root folder:

  {
    // use babel-eslint for parsing!
    "parser": "babel-eslint",
    "env": {
       // for browser
      "browser": true,
       // in CommonJS
      "node": true
    },
    // some rule options:
    "rules": {
      "quotes": [2, "single"],
      "eol-last": [0],
      "no-mixed-requires": [0],
      "no-underscore-dangle": [0]
    }
  }

Restart sublime text
reference:
- http://eddychang.me/blog/javascript/51-sublime-text-3-react.html
- http://www.petethompson.net/blog/js/2015/02/25/sublime-text-3-and-modern-js/

3.React-native es6模組的寫法

在ES6的規格模組下, 有些寫法做了改變:
- 匯出模組的寫法: 代替module.export, 可以使用export關鍵字 ex: var foo = function foo (){ return true; };
  export { foo };
  - 匯入模組的寫法:
    代替require(), 可以使用import關鍵字 ex: import { foo } from 'foo'; let test = foo() === true ? 'Pass' : 'Fail'; console.log(test, 'foo() should import and return true.')
- 在class中寫法上的各種差異:
  - 創建class:
    如果用原本React.createClass的寫法將會造成錯誤, 在es6中需改成 class xxx extends Component
  - 初始化this.state:
    如果在用getInitailState()的做法會出現錯誤, 在es6中需改成
    constructor(props) { super(props); }
  - 觸發事件:
    es6的寫法並不會主動binding this, 需要在constructor中手動binding
    Example:
    class WeatherProject extends Component { constructor(props) { super(props); this.state = { zip: '', forecast: { main: 'Clouds', description: 'few clouds', temp: 45.7 } }; this._handleTextChange = this._handleTextChange.bind(this) } _handleTextChange(event) { console.log(event.nativeEvent.text); this.setState({ zip: event.nativeEvent.text }); } render() { } }
  - Arrow function // ES5 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 var total = values.reduce((a, b) => a + b, 0);
  - reference:
    http://www.jianshu.com/p/82a09063e61c
    http://stackoverflow.com/questions/34196988/reactjs-giving-inst-render-is-not-a-function-error
    http://www.peachis.me/react-createclass-versus-extends-react-component/
    http://stackoverflow.com/questions/26408388/reactjs-this-state-null

4.ES6 Promise

AsyncStorage.getItem().then().catch().done();
Reference:https://vinta.ws/code/es6-promise-notes.html

5. 風格樣式, 排版

使用方式
- Stylesheet.Create
傳統css樣式
- 通常是全域, 如果不小心可能一個元件的樣式可能會破壞另一個元件的樣式
行內樣式
樣式物件
透過屬性
- example:

    import React, {
      Component
    } from 'react';
    import {
      Text,
      View,
    } from 'react-native'; 


    class CustomizableText extends Component {
      constructor(props) {
        super(props);   
        this.style = {
        };
      }
      render() {
        return (
          <Text style ={[this.props.style]} >Hello</Text>
        )
      }
    };
    CustomizableText.propTypes = {
      style: React.PropTypes.Text.isRequred,
    };

flexbox
- 能夠為動態調整大小的元素建構可預期的佈局結構
- 基本排版練習
  - 以下範例皆以下面程式碼為基礎修改:

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

      export default class layouPractice extends Component {
        render() {
          return (
            <View style={styles.parent}>
              <Text style={styles.child}>
                Child one
              </Text>
              <Text style={styles.child}>
                Child two
              </Text>
              <Text style={styles.child}>
                Child three
              </Text>
            </View>
          );
        }
      }

      const styles = StyleSheet.create({
        parent: {
          backgroundColor: '#F5FCFF',
          borderColor: '#0099AA',
          borderWidth: 5,
          marginTop: 30
        },
        child: {
          borderColor: '#AA0099',
          borderWidth: 2,
          textAlign: 'center',
          fontSize: 24
        }
      });

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

demo:
flex與flexDirection屬性
- 改變flex及flexDirection
  - 左: 修改styles:
    const styles = StyleSheet.create({ parent: { flex: 1, flexDirection: 'column', backgroundColor: '#F5FCFF', borderColor: '#0099AA', borderWidth: 5, marginTop: 30 }, child: { flex: 1, borderColor: '#AA0099', borderWidth: 2, textAlign: 'center', fontSize: 24 } });
  - 右: 修改styles:

      const styles = StyleSheet.create({
        parent: {
          flex: 1,
          flexDirection: 'row',
          backgroundColor: '#F5FCFF',
          borderColor: '#0099AA',
          borderWidth: 5,
          marginTop: 30
        },
      child: {
        flex: 1,
        borderColor: '#AA0099',
        borderWidth: 2,
        textAlign: 'center',
        fontSize: 24
      }
  });

改變alignItems
- 左: 修改styles:

      const styles = StyleSheet.create({
        parent: {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'flex-start,
          backgroundColor: '#F5FCFF',
          borderColor: '#0099AA',
          borderWidth: 5,
          marginTop: 30
        },
      child: {
        flex: 1,
        borderColor: '#AA0099',
        borderWidth: 2,
        textAlign: 'center',
        fontSize: 24
      }
  });

* 中: 修改styles:


      const styles = StyleSheet.create({
        parent: {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center,
          backgroundColor: '#F5FCFF',
          borderColor: '#0099AA',
          borderWidth: 5,
          marginTop: 30
        },
      child: {
        flex: 1,
        borderColor: '#AA0099',
        borderWidth: 2,
        textAlign: 'center',
        fontSize: 24
      }
      });

* 右: 修改styles:


      const styles = StyleSheet.create({
        parent: {
          flex: 1,
          flexDirection: 'flex-end',
          alignItems: 'center,
          backgroundColor: '#F5FCFF',
          borderColor: '#0099AA',
          borderWidth: 5,
          marginTop: 30
        },
      child: {
        flex: 1,
        borderColor: '#AA0099',
        borderWidth: 2,
        textAlign: 'center',
        fontSize: 24
      }
      });

練習較複雜的排版

要點
- 1.由外到內, 由左到右安排排版, 以flex設定權重, 以fleDirection設定子元素的方向
  - 以外層用flexDirection調整內部元素的排列方向
  - 內部元素用flex調整權重
- 2.共用的style可抽出來,加入多個style時記得用陣列表示

code:

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

  export default class layouPractice extends Component {
    render() {
      return (
        <View style={styles.parent}>
          <View style={[styles.topBlock, styles.base]}>
          <View style={[styles.leftCol, styles.base]}>
          <View style={[styles.cellOne, styles.base]}>
            <Text>1</Text>
          </View>
          <View style={[styles.cellTwo, styles.base]}>
            <Text>2</Text>
          </View>
          </View>  
          <View style={[styles.cellThree, styles.base]}>
            <Text>3</Text>
          </View>  
      </View>
      <View style={[styles.bottomBlock, styles.base]}>
        <View style={[styles.cellFour, styles.base]}>
          <Text>4</Text>
        </View>  
        <View style={[styles.cellFive, styles.base]}>
          <Text>5</Text>
        </View>  
        <View style={[styles.bottomRight]}>
        <View style={[styles.cellSix, styles.base]}>
          <Text>6</Text>
        </View>  
        <View style={[styles.cellSeven, styles.base]}>
          <Text>7</Text>
        </View>  
      </View>
    </View>
  </View>
  );
}
}

const styles = StyleSheet.create({
  parent: {
    flex: 1,
    flexDirection: 'column',
    position: 'absolute',
    top: 30,
    left: 0,
    right: 0,
    bottom: 0
  },
  topBlock: {
    flex: 5,
    flexDirection: 'row'
  },
  bottomBlock: {
    flex: 2,
    flexDirection: 'row'
  },
  bottomRight: {
    flex: 2,
    flexDirection: 'column'
  },
  leftCol: {
    flex: 2
  },
  cellOne: {
    flex: 1,
    borderBottomWidth: 15
  },
  cellTwo: {
    flex: 3
  },
  cellThree: {
    backgroundColor: '#FF0000',
    flex: 5
  },
  cellFour: {
    flex: 3,
    backgroundColor: '#0000FF'
  },
  cellFive: {
    flex: 6
  },
  cellSix: {
    flex: 1
  },
  cellSeven: {
    flex: 1
  },
  base: {
    borderColor: '#000000',
    borderWidth: 2
  }
});

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

demo:

6. 行動元件

HTML元素與React元件的對比
Text
Image
使用手勢與觸控
- touchableHighlight
使用組織性元件
- ListView
- Navigator
平台專屬元件

7. 平台API

Polyfill
AsyncStorage
- AsyncStorage的儲存鍵可為任何字串: 通常使用@AppName: Key格式
- AsyncStorage以getItem與setItem回應.
- Example

Previous7.1.利用Sass & media query在不使用框架下完成RWD

Last updated 5 years ago

hashtagThis section contain the following items:

hashtag1.Building Development environment (For OS X)

hashtag3.React-native es6模組的寫法

hashtag4.ES6 Promise

hashtag5. 風格樣式, 排版

hashtag6. 行動元件

hashtag7. 平台API