简介
ReactNative旨在开发过程的高效,它具有一些原生App所不具备的优势,它的跨平台性非常强,代码的复用程度非常的高,并且可以具有热更新的能力,其次就是它的社区也在日趋的强大起来。
为什么选择ReactNative
纵观国内的比较大的厂商并没有完全的转移到React Native,但也没有完全的排斥说不搞React Native,所以学习这样一个新的技能对我们有百利而无一害,在学习React Native的过程中,我们也会接触到React这样一个新的UI方案,同时对一些ES6,ES7新的特性也都会有接触,总体感觉还不错~
入门
学习React Native最好还是要有一些React JavaScript 以及原生应用的开发经验,当然没有也无妨,慢慢一步一步的来嘛。
目前我介绍的是针对Android端介绍的,后续也会把Ios相关的内容补上。
需要有的软件:
- Node.js
- Android studio
- Watchman
运行:
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
知识点
项目的入口: index.android.js / index.ios.js
视图呈现:
render() {
return (
<View style={cStyles.container}>
<View style={styles.row}>
<Text style={styles.label}>AAA</Text>
<View style={styles.rowCount}>
<Text style={styles.countUnit}>BBB/Text>
<Text style={styles.price}>CCC</Text>
</View>
</View>
<LinkRow label="DDD" onPress={() => {
}}/>
<LinkRow label="EEE" onPress={this.logout}/>
</View>
);
}
我们的视图需要写在return()下面,并且这个下面只能有一个根View
抽出公共控件:
在界面中,可能我们有很多控件是可以复用的,如果我们不把它们抽出来的话,可能就会导致代码的臃肿,并且不是很利于维护,所以我们应该将公共部分抽出来。
将公用的style抽象出来
同上
推荐编译器
- 需要测试性能的时候需要使用Android studio
- 与性能无关时,编写代码时还是推荐使用WebStorm编写代码
好了,就先介绍到这里吧,在等到我有时间的时候,可以介绍一下,手写一个tab,或者实现登录注册的全部逻辑(包含网络框架)。