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 LibraryCreate and Launch android simulator:
sudo android avd, create a instance (ex. nexus) Start instance react-native run-android2.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
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);
4.ES6 Promise
AsyncStorage.getItem().then().catch().done();
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
Last updated
Was this helpful?