Beginning react native
- 4. 襴″ 覈覦朱
Q. 襴″ れ危磯 覘螳?
覦ろ襴渚碁 螳覦 企伎
誤壱伎る れ危磯 朱
豺 れ危磯 UI螻牛 譴
Q. 襴″ れ危磯 轟?
貉危碁ゼ 螳蟆 襷り 所 譟壱伎 觀磯ゼ 所 襷 蠍一
Q. 襴″ れ危磯 襦
https://facebook.github.io/react-native/showcase.html
Facebook Group
ES5, ES6(2015) / ECMAScript
JSX(JavaScriptXML)
React.js
iOS (Objective-C)
襴″ れ危磯 蟯 讌る 伎手鍵
- 6. 1. Homebrew
2. Node.js
3. 朱 iOS/Android 炎覦 蟆
4. React Native 企殊伎誤 蟲(react-native-cli)
誤 伎
https://facebook.github.io/react-native/docs/getting-started.html
螳覦蟆 蟲豢 伎 企慨蠍
Atom Nuclide.io
- 8. 螳 襷れ 覲願鍵
1. Todo ロ .
2. 豢螳 覯殊 覃 ロ Todo 豢螳.
3. 豢螳 Todo伎 襴ろ碁 .
*Todo 伎 Firebase ロ蠍
- 9. 螳 襷れ 覲願鍵
1. 襦 燕蠍
$ react-native init TodoApp
$ cd TodoApp
2. れ れ蠍
$ npm install firebase save
$ npm install react-native-vector-icons underscore save
伎 伎
https://github.com/oblador/react-native-vector-icons
- 10. 螳 襷れ 覲願鍵
* 焔 襦 启 危ｴ覲願鍵
- 11. 螳 襷れ 覲願鍵
3. 襴″ れ危磯 れ ろ蠍
$ npm start
4. 焔 襦語 煙 蠍磯蠍 (iOS)
$ react-native run-ios
ios启 TodoApp.xcodeproj襯 Xcode襦 伎伎
Run伎 蠍磯蠍
- 12. 螳 襷れ 覲願鍵
* index.ios.js 危ｴ覲願鍵
import import React, {
AppRegistry,
Component,
StyleSheet,
...
} from 'react-native';
var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
...
} = React;
component class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
...
</View>
);
}
}
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
...
</View>
);
}
});
styles const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
...
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
...
});
register component AppRegistry.registerComponent('AwesomeProject', ()
=> AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', ()
=> AwesomeProject);
ES6 ES5
- 13. 螳 襷れ 覲願鍵
Component
React vs React Native
div >>> View
span >>> Text
li, ui >>> ListView
Img >>> Image
Native Component
UITabBar -> TabBarIOS
UINavigationController -> NavigatorIOS
UITableView -> ListView
Native binding(Objective-C)
RCT_EXPORT_MODULE
RCT_EXPORT_METHOD
ES5
- 14. 螳 襷れ 覲願鍵
5. 貉危碁 伎襯 豢螳 覦 譟壱蠍
6. ろ 讌 譯手鍵
7. 一危磯伎 郁屋蠍
8. 一危郁襴 覿覿 豢螳
9. 企欧 豌襴 豢螳
