前言
很久此前就想钻探React
Native了,可是一向未曾落地的火候,我直接觉得一个技巧要有出生的境况才有切磋的意义,刚好最近迎来了新的APP,在可控的限制内,我们可以在地点做任何想做的事务。
PS:任何新技巧的尝鲜都自然要控制在融洽能操纵的限定内,失利了会有可替换方案,不要引起不可逆的标题,那样会给集体造成魔难性的结局。
实际上,RN经过一段时间发展,已经有丰盛数量的人尝试过了,就我身边就有几批,褒贬也不一:
① 做UI快
② 仍旧有无独有偶限制,不如原生Native
③ 入门容易,能让前者火速开发App
④ iOS&Android一大半代码通用
⑤ code-push能做热更新,可是用倒霉仍然坑
……
在得到一些消息后,能够看看,要用RN高成效的做出相比较不错的App是有可能的,单看投入度与最初安排是不是合理,而且现在有关React
Native的种种文档是一定丰裕的,所以那几个等级想切入RN可能是一个不利的挑选。
带着试试看不吃亏的想法,大家初叶后天的就学,那里是有的比较优质的求学材料:
https://github.com/reactnativecn/react-native-guide
未雨绸缪阶段
搭建开发条件
http://reactnative.cn/docs/0.36/getting-started.html
合法的事例其实写的很好了,我照着官方的例子能很好的跑起来,大家温馨去探视啊
此处在运转时候要专注一下,我因为打开了FQ工具,一运行就crash,那里推测是翻(科学上网法)墙工具对localhost造成了震慑,导致不能够读取文件,这几个也许波及到RN底层完结,大家后面长远了再去做切磋,那里关闭FQ工具即可。
接下来首个难点,是http的图形浮现不出去,那里折腾了很久,却发现前面的章节有了验证,app默许只帮助https的链接,那里大家改下配置即可:
https://segmentfault.com/a/1190000002933776
RN中的js使用的是相比较新的语法,那里也须要咱们展开学习,我读书的感触是ES6提供了好多语法糖,不过有几个东西也要注意。
Class
JavaScript以前的一连全部是复写原型链模拟完结的,作为大型应用框架,继承是必不可少的,所以ES6平昔将那块API化了,我那里写一个简短的demo:
1 class Animal {
2 constructor(name) {
3 this.name = name;
4 }
5 say() {
6 console.log('我是' + this.name);
7 }
8 }
9
10 class Person extends Animal {
11 say() {
12 console.log('我是人类');
13 super.say();
14 }
15 }
16
17 var p = new Person('叶小钗')
18 p.say();
1 /*
2 我是人类
3 我是叶小钗
4 */
Module
咱俩一般采用requireJS解决模块化的题材,在ES6里面提议了Module作用在法定解决了模块化的难题,那里优缺点不是大家着想的严重性,简单询问下语法,八个主导为:
① export
② import
ES6以一个文本为单位,一个文本可以三个出口,那里以RN的一个引用为例:
1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 StyleSheet,
5 Text,
6 View
7 } from 'react-native';
8 import styles from './static/style/styles.js';
可以假想,那里一定会有一个react文件,并且其中或者是其一样式的:
export default class React......
expoet class Component ......
PS:一个文书只可以有一个default
出口的default一定会出现,不行使大括号包裹,其他部分随意输出,那里与大家选用require或有不相同,必要注意。
应该说ES6提供了许多语法糖,有人欢快,有人不爱好,那几个看爱好使用呢,比如=>箭头函数。了解了上述提到,再合营ES6的一些文档,基本能够写RN的代码了。
都会列表
拆分目录
那边,我们做一个都市列表,真实的拜会接口获取数据,然后渲染页面,看看做出来效果如何。
率先,我们先导化一个RN项目:
react-native init Citylist
接下来选择Xcode打开iOS中的项目,编译运行:
1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 StyleSheet,
5 Text,
6 View
7 } from 'react-native';
8
9 export default class Citylist extends Component {
10 render() {
11 return (
12 <View style={styles.container}>
13 <Text style={styles.welcome}>
14 Welcome to React Native!
15 </Text>
16 <Text style={styles.instructions}>
17 To get started, edit index.ios.js
18 </Text>
19 <Text style={styles.instructions}>
20 Press Cmd+R to reload,{'\n'}
21 Cmd+D or shake for dev menu
22 </Text>
23 </View>
24 );
25 }
26 }
27
28 const styles = StyleSheet.create({
29 container: {
30 flex: 1,
31 justifyContent: 'center',
32 alignItems: 'center',
33 backgroundColor: '#F5FCFF',
34 },
35 welcome: {
36 fontSize: 20,
37 textAlign: 'center',
38 margin: 10,
39 },
40 instructions: {
41 textAlign: 'center',
42 color: '#333333',
43 marginBottom: 5,
44 },
45 });
46
47 AppRegistry.registerComponent('Citylist', () => Citylist);
View Code
那边除了index.io.js,其他文件大家不必理睬,大家做的率先件业务是,将样式文件剥离出来,新建static文件夹,加入images和style,将样式文件移入style文件,新建style.js:
1 import {
2 StyleSheet
3 } from 'react-native';
4
5 export let styles = StyleSheet.create({
6 container: {
7 flex: 1,
8 justifyContent: 'center',
9 alignItems: 'center',
10 backgroundColor: '#F5FCFF',
11 },
12 welcome: {
13 fontSize: 20,
14 textAlign: 'center',
15 margin: 10,
16 },
17 instructions: {
18 textAlign: 'center',
19 color: '#333333',
20 marginBottom: 5,
21 },
22 });
下一场首页代码再做一些改成:
1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 Text,
5 View
6 } from 'react-native';
7
8 import {styles} from './static/style/style';
9
10
11 export default class Citylist extends Component {
12 render() {
13 return (
14 <View style={styles.container}>
15 <Text style={styles.welcome}>
16 Welcome to React Native!
17 </Text>
18 <Text style={styles.instructions}>
19 To get started, edit index.ios.js
20 </Text>
21 <Text style={styles.instructions}>
22 Press Cmd+R to reload,{'\n'}
23 Cmd+D or shake for dev menu
24 </Text>
25 </View>
26 );
27 }
28 }
29
30 AppRegistry.registerComponent('Citylist', () => Citylist);
PS:这里有一个箭头函数
1 () => Citylist
2 //===>
3 function () {
4 return Citylist;
5 }
静态资源剥离后,大家先不处理其他的,大家来做多少请求。
多少请求
RN纵然内置了ajax库,然则一般推荐应用RN自带的Fetch,最简便易行的利用是:
fetch('https://mywebsite.com/mydata.json')
PS:大家在求学RN的时候,也是在求学神马形式是顺应的,或者说熟练使用合适的零部件
恳请一个接口是这么写的(使用promise):
1 fetch('https://apikuai.baidu.com/city/getstartcitys')
2 .then((response) => response.json())
3 .then((jsonData) => {
4 console.log(jsonData);
5 })
6 .catch((e) => {
7 console.log(e)
8 })
那里开辟调试环境一看,输出了俺们要的数据:
相似的话,大家要求对数据请求应该封装为一个底层库,那里只做一些大致改造,真实项目不会那样做:
1 export default class Citylist extends Component {
2 getdata(url, suc, err) {
3 return fetch(url)
4 .then((response) => response.json())
5 .then((data) => {
6 if(data.errno == 0) {
7 suc && suc(data.data)
8 }
9 })
10 .catch((e) => {
11 console.log(e)
12 });
13 }
14 render() {
15
16 this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
17 s = ''
18 });
19
20 return (
21 <View style={styles.container}>
22 <Text style={styles.welcome}>
23 Welcome to React Native!
24 </Text>
25 <Text style={styles.instructions}>
26 To get started, edit index.ios.js
27 </Text>
28 <Text style={styles.instructions}>
29 Press Cmd+R to reload,{'\n'}
30 Cmd+D or shake for dev menu
31 </Text>
32 </View>
33 );
34 }
35 }
PS:那里的采纳不必然科学,先成功成效再改正吧
俺们取所有的城池cities,那么些数据量很大,有1000多条记下,也可以测试下拖动功能了,那里为类参加构造函数,因为列表是可变的,暂时把列表数据归为state(react也不是太熟,若是有难点持续优化,先完结功效):
1 constructor(props) {
2 super(props);
3 this.state = {
4 cities: []
5 };
6 }
1 var scope = this;
2 //本来想使用箭头函数的,但是了解不太清楚,demo时候暂时这样吧
3 this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
4 scope.state.citys = data.cities;
5 });
列表渲染
拍卖了数据难题后,大家开头做列表渲染,那里运用ListView组件,这几个组件用以突显一个垂直滚动列表,适合长列表,多个必须的特性是datasource和renderRow:
dataSource:列表数据源
renderRow:逐个解析数据源中的数据,然后回到一个设定好的格式来渲染
简言之书写代码:
1 export default class Citylist extends Component {
2 constructor(props) {
3 super(props);
4
5 this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
6 this.state = {
7 cities: this.ds.cloneWithRows([
8 {cnname
9 :
10 "文山壮族苗族自治州",
11 enname
12 :
13 "wszzmzzzz",
14 extflag
15 :
16 "1",
17 flag
18 :
19 "0",
20 name
21 :
22 "wenshanzhuangzumiaozuzizhizhou",
23 parentid
24 :
25 "28",
26 regionid
27 :
28 "177",
29 shortname
30 :
31 "文山",
32 shownname
33 :
34 "文山",
35 type
36 :
37 "2"},{cnname
38 :
39 "文山壮族苗族自治州",
40 enname
41 :
42 "wszzmzzzz",
43 extflag
44 :
45 "1",
46 flag
47 :
48 "0",
49 name
50 :
51 "wenshanzhuangzumiaozuzizhizhou",
52 parentid
53 :
54 "28",
55 regionid
56 :
57 "177",
58 shortname
59 :
60 "文山",
61 shownname
62 :
63 "文山",
64 type
65 :
66 "2"},{cnname
67 :
68 "文山壮族苗族自治州",
69 enname
70 :
71 "wszzmzzzz",
72 extflag
73 :
74 "1",
75 flag
76 :
77 "0",
78 name
79 :
80 "wenshanzhuangzumiaozuzizhizhou",
81 parentid
82 :
83 "28",
84 regionid
85 :
86 "177",
87 shortname
88 :
89 "文山",
90 shownname
91 :
92 "文山",
93 type
94 :
95 "2"}
96 ])
97 };
98 }
99 getdata(url, suc, err) {
100 return fetch(url)
101 .then((response) => response.json())
102 .then((data) => {
103 if(data.errno == 0) {
104 suc && suc(data.data)
105 }
106 })
107 .catch((e) => {
108 console.log(e)
109 });
110 }
111 componentDidMount(){
112 var scope = this;
113 this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
114 console.log(data)
115
116 scope.setState({
117 cities: scope.ds.cloneWithRows(data.cities)
118 });
119 //scope.state.citys = data.cities;
120 //this.getdata('https://apikuai.baidu.com/city/getstartcitys', (data) => {
121 // this.state.citys = data.cities;
122 //});
123 });
124 }
125 render() {
126 return (
127 <View style={styles.container}>
128 <ListView
129 dataSource={this.state.cities}
130 renderRow={(rowData) => <Text>{rowData.cnname}</Text>}
131 />
132 </View>
133 );
134 }
135 }
View Code
接下来就这么了,即使丑是丑点,不过还可以看嘛,这里我们先不去理睬城市的排序,也不做搜索效果,我们先把布局处理下,他的猥琐我曾经不堪了
体制处理
明日我们初始拍卖那段样式:
1 import React, { Component } from 'react';
2 import {
3 AppRegistry,
4 ListView,
5 Text,
6 View
7 } from 'react-native';
8
9 import {styles} from './static/style/style';
10
11 export default class Citylist extends Component {
12 constructor(props) {
13 super(props);
14
15 this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
16 this.state = {
17 cities: this.ds.cloneWithRows([])
18 };
19 }
20 getdata(url, suc, err) {
21 return fetch(url)
22 .then((response) => response.json())
23 .then((data) => {
24 if(data.errno == 0) {
25 suc && suc(data.data)
26 }
27 })
28 .catch((e) => {
29 console.log(e)
30 });
31 }
32 componentDidMount(){
33 var scope = this;
34 this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
35 console.log(data)
36
37 scope.setState({
38 cities: scope.ds.cloneWithRows(data.cities)
39 });
40 //scope.state.citys = data.cities;
41 //this.getdata('https://apikuai.baidu.com/city/getstartcitys', (data) => {
42 // this.state.citys = data.cities;
43 //});
44 });
45 }
46 render() {
47 return (
48 <View style={styles.container}>
49 <ListView style={styles.listView} enableEmptySections={true}
50 dataSource={this.state.cities}
51 renderRow={(rowData) =>
52 <View style={styles.listItem} >
53 <Text>{rowData.cnname}</Text>
54 </View>
55 }
56 />
57 </View>
58 );
59 }
60 }
61
62 AppRegistry.registerComponent('Citylist', () => Citylist);
View Code
1 import {
2 StyleSheet
3 } from 'react-native';
4
5 export let styles = StyleSheet.create({
6 container: {
7 flex: 1,
8 backgroundColor: '#F5FCFF',
9 },
10 listView: {
11 marginTop: 30,
12 flex: 1,
13 borderBottomColor:'#CCCCCC',//cell的分割线
14 borderBottomWidth:1
15 },
16 listItem: {
17 paddingTop: 15,
18 paddingBottom: 15,
19 paddingLeft: 10,
20 flexDirection:'row',
21 borderBottomColor:'#CCCCCC',//cell的分割线
22 borderBottomWidth:1
23 }
24 });
View Code
事件绑定
然后,大家再为每行数据增加点击事件,那里也做不难一点,打印出当下行的值即可:
1 onPressAction(data){
2 alert(data.cnname)
3 }
4 render() {
5 return (
6 <View style={styles.container}>
7 <ListView style={styles.listView} enableEmptySections={true}
8 dataSource={this.state.cities}
9 renderRow={(rowData) =>
10 <View style={styles.listItem} >
11 <Text onPress={() => this.onPressAction(rowData)}>{rowData.cnname}</Text>
12 </View>
13 }
14 />
15 </View>
16 );
17 }
PS:我尼玛,那么些RN的读书,很大程度就是一个个API或者零部件的熟识,那块不熟谙的话,做起来恼火的很
自身那边初阶想给Text设置边框,怎么都不能不负众望,前面就加了一层View就好了,这种小细节须要多摸索,那几个是终极的协会:
结语
用作一个demo的话,这几个事例基本可以作证部分标题标,纵然本人本意是想做成那几个样子的:)
通过这一个事例,大家大致的读书了下RN的支出格局,做出来的感受是脸书很有力,做了一个系列性的东西,举个例证来说(村办感受)
事先大家做Hybrid的时候Header是Native提供的,大致做法是这么的:
1 //Native以及前端框架会对特殊tagname的标识做默认回调,如果未注册callback,或者点击回调callback无返回则执行默认方法
2 //back前端默认执行History.back,如果不可后退则回到指定URL,Native如果检测到不可后退则返回Naive大首页
3 //home前端默认返回指定URL,Native默认返回大首页
4 this.header.set({
5 left: [
6 {
7 //如果出现value字段,则默认不使用icon
8 tagname: 'back',
9 value: '回退',
10 //如果设置了lefticon或者righticon,则显示icon
11 //native会提供常用图标icon映射,如果找不到,便会去当前业务频道专用目录获取图标
12 lefticon: 'back',
13 callback: function () { }
14 }
15 ],
16 right: [
17 {
18 //默认icon为tagname,这里为icon
19 tagname: 'search',
20 callback: function () { }
21 },
22 //自定义图标
23 {
24 tagname: 'me',
25 //会去hotel频道存储静态header图标资源目录搜寻该图标,没有便使用默认图标
26 icon: 'hotel/me.png',
27 callback: function () { }
28 }
29 ],
30 title: 'title',
31 //显示主标题,子标题的场景
32 title: ['title', 'subtitle'],
33
34 //定制化title
35 title: {
36 value: 'title',
37 //标题右边图标
38 righticon: 'down', //也可以设置lefticon
39 //标题类型,默认为空,设置的话需要特殊处理
40 //type: 'tabs',
41 //点击标题时的回调,默认为空
42 callback: function () { }
43 }
44 });
由此那些约定,大家的Native就会生成一名目繁多headerUI:
而RN做了什么吗,他或许是贯彻了一个如此的竹签(或者说是语法糖):
<Header title="" right="[]" ></Header>
接下来RN会自己去分析那些标签,生成上述的靶子,然后生成Native的UI,那一个我们其实也能做到,不过大家一个能不辱任务,10个就不自然做赢得了,RN牛的地方就牛在她提供了如此大一坨东西:
接下来还有她一整套的体制连串,卓殊之大手笔,而经过RN的八面玲珑预定,生成了一套NativeUI,应该说来体验是非凡高的,开发功能因为可以做到一大半iOS
Android通用,纵然全体支付功能不可能与Hybrid伤官,但相对有其应用场景。
俺们也有一部分同事说了一部分RN的标题,然而框架在前进,容器在优化,那个难题在某个时刻点应该能一蹴而就的,总的说来,RN仍旧很有学习的价值,前边我说不定会花不少素养去开展落地!!!
为了汇聚资源,这里引用那里的上学资源:https://github.com/reactnativecn/react-native-guide
React Native
-
营造 Facebook F8 2016 App / React Native
开发指南 http://f8-app.liaohuqiu.net/ -
React-Native入门指南 https://github.com/vczero/react-native-lesson
-
30天学习React
Native教程 https://github.com/fangwei716/30-days-of-react-native -
React-Native视频教程(部分免费) https://egghead.io/technologies/react
-
React Native
开发培训录像教程(汉语|免费) https://www.gitbook.com/book/unbug/react-native-training/details -
react-native
官方api文档 http://facebook.github.io/react-native/docs/getting-started.html -
react-native闽南语文档(极客大学) http://wiki.jikexueyuan.com/project/react-native/
-
react-native华语文档(react
native中文网,人工翻译,官网完全同步) http://react-native.cn/docs/getting-started.html -
react-native第一课 http://html-js.com/article/2783
-
浅显 React Native:使用 JavaScript
营造原生应用 http://zhuanlan.zhihu.com/FrontendMagazine/19996445 -
React Native通讯机制详解 http://blog.cnbang.net/tech/2698/
-
React Native布局篇 https://segmentfault.com/a/1190000002658374
-
React Native
基础操练指北(一) https://segmentfault.com/a/1190000002645929 -
React Native
基础锻炼指北(二) https://segmentfault.com/a/1190000002647733 -
Diary of Building an iOS App with React
Native http://herman.asia/building-a-flashcard-app-with-react-native -
React Native For Beginners – The Next Big
Thing? https://devdactic.com/react-native-for-beginners/ -
How To Implement A Tab Bar With React
Native https://devdactic.com/react-native-tab-bar/ -
tcomb-form-native使用视频教程(需FQ) https://react.rocks/example/tcomb-form-native
-
React Native分享记录 https://segmentfault.com/a/1190000002678782
-
React Native创设地面视图组件 https://www.dobest.me/article/11
-
react-native-android-lession(安卓体系教程) https://github.com/yipengmu/react-native-android-lession
-
React Native模块桥接详解 https://www.dobest.me/article/14
-
React Native:
配置和启动 http://www.liaohuqiu.net/cn/posts/react-native-1/ -
React Native: Android
的打包 http://www.liaohuqiu.net/cn/posts/react-native-android-package/ -
ReactNative之原生模块开发并宣布——iOS篇 http://www.liuchungui.com/blog/2016/05/02/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-iospian/
-
ReactNative之原生模块开发并颁发——android篇 http://www.liuchungui.com/blog/2016/05/08/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/
-
react-native的率先课 https://github.com/coderyi/blog/blob/master/articles/2016/0122_react-native_first_lesson.md
-
sqlite,React-Native专题种类小说 http://www.lcode.org/react-native/
React.js
-
react.js国语文档 http://reactjs.cn/
-
react.js入门教程(gitbook) https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
-
react.js急迅入门教程 –
阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html -
react.js视频教程 http://react-china.org/t/reactjs/584
-
React
Native之React速学教程https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B
ES6
-
深刻浅出ES6(一):ES6是何等 http://www.infoq.com/cn/articles/es6-in-depth-an-introduction
-
长远浅出ES6(二):迭代器和for-of循环 http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop
-
深切浅出ES6(三):生成器
Generators http://www.infoq.com/cn/articles/es6-in-depth-generators -
浓厚浅出ES6(四):模板字符串 http://www.infoq.com/cn/articles/es6-in-depth-template-string
-
深刻浅出ES6(五):不定参数和默许参数 http://www.infoq.com/cn/articles/es6-in-depth-rest-parameters-and-defaults
比比皆是教程
-
深切浅出React(一):React的规划文学 –
不难之美 http://www.infoq.com/cn/articles/react-art-of-simplity -
深刻浅出React(二):React开发神器Webpack http://www.infoq.com/cn/articles/react-and-webpack
-
深远浅出React(三):领悟JSX和组件 http://www.infoq.com/cn/articles/react-jsx-and-component
-
深刻浅出React(四):虚拟DOM
Diff算法解析 http://www.infoq.com/cn/articles/react-dom-diff -
深刻浅出React(五):使用Flux搭建React应用程序架构 http://www.infoq.com/cn/articles/react-flux
-
react-webpack-cookbook中文版 http://fakefish.github.io/react-webpack-cookbook/
-
Flex
布局语法教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -
React虚拟DOM浅析 http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/
-
react组件间通讯 http://www.alloyteam.com/2015/07/react-zu-jian-jian-tong-xin/
-
React 数据流管理架构之 Redux
介绍 http://www.alloyteam.com/2015/09/react-redux/ -
React服务器端渲染实践小结 http://www.alloyteam.com/2015/10/8783/
-
React Native Android
踩坑之旅 http://www.alloyteam.com/2015/10/react-native-android-steps-on-tour/ -
React Native 之
JSBridge http://www.alloyteam.com/2015/05/react-native-zhi-jsbridge/ -
React Native
商讨与执行教程 https://github.com/crazycodeboy/RNStudyNotes
React Native探索系列教程
-
React
Native探索(一):背景、规划软危害 http://www.infoq.com/cn/articles/react-native-overview -
React
Native探索(二):布局篇 http://www.infoq.com/cn/articles/react-native-layout -
React Native探索(三):与 react-web
的融合 http://www.infoq.com/cn/articles/react-native-web
开源APP
切磋源码也是一个很好的学习方法
-
合法演示App https://github.com/facebook/react-native/tree/master/Examples
-
Facebook F8 App https://github.com/fbsamples/f8app
-
GitHub
Popular(一个用来查阅GitHub最受欢迎与最热项目的App)已上架https://github.com/crazycodeboy/GitHubPopular -
奇舞周刊 iOS 版(上架应用) https://github.com/fakefish/Weekly75
-
react-native-dribbble-app https://github.com/catalinmiron/react-native-dribbble-app
-
Gank.io客户端 https://github.com/Bob1993/React-Native-Gank
-
Mdcc客户端(优质) https://github.com/Bob1993/mdcc-client
-
Leanote for iOS(云笔记) https://github.com/leanote/leanote-ios-rn
-
ReactNativeRubyChina https://github.com/henter/ReactNativeRubyChina
-
HackerNews-React-Native https://github.com/iSimar/HackerNews-React-Native
-
React-Native新闻客户端 https://github.com/tabalt/ReactNativeNews
-
newswatch(音讯客户端) https://github.com/bradoyler/newswatch-react-native
-
buyscreen(购买页面) https://github.com/appintheair/react-native-buyscreen
-
react-native-todo https://github.com/joemaddalone/react-native-todo
-
react-native-beer https://github.com/muratsu/react-native-beer
-
react-native-stars https://github.com/86/react-native-stars
-
依傍天猫商城首页的app https://github.com/hugohua/react-native-demo
-
ReactNativeChess https://github.com/csarsam/ReactNativeChess
-
react native 编写的音乐软件 https://github.com/Johnqing/miumiu
-
react-native-pokedex https://github.com/ababol/react-native-pokedex
-
CNode-React-Native https://github.com/SFantasy/CNode-React-Native
-
8tracks电台客户端 https://github.com/voronianski/EightTracksReactNative
-
React-Native完毕的测算器 https://github.com/yoxisem544/Calculator-using-React-Native
-
房产搜索app https://github.com/jawee/react-native-PropertyFinder
-
ForeignExchangeApp https://github.com/peralmq/ForeignExchangeApp
-
Segmentfault 客户端 https://github.com/fakefish/sf-react-native
-
Den – 房屋销售app* https://github.com/asamiller/den
-
Noder-cnodejs客户端 https://github.com/soliury/noder-react-native
-
微博晚报Android版 https://github.com/race604/ZhiHuDaily-React-Native
-
ziliun-react-native https://github.com/sonnylazuardi/ziliun-react-native
-
react-native-weather-app https://github.com/shevawen/react-native-weather-app
-
React Native Sample
App(Navigation,Flux) https://github.com/taskrabbit/ReactNativeSampleApp -
TesterHome社区app https://github.com/qddegtya/A-ReactNative-TesterHome
-
Finance – 股票报价app https://github.com/7kfpun/FinanceReactNative
-
shopping – 购物app https://github.com/bigsui/shopping-react-native
-
zhuiyuan – 追源cms app https://github.com/kazaff/ZhuiYuanDemo
-
uestc-bbs-react-native – UESTC清水河畔RN客户端(with
Redux) https://github.com/just4fun/uestc-bbs-react-native -
react-native-nw-react-calculator(iOS/Android、Web、桌面多端) https://github.com/benoitvallon/react-native-nw-react-calculator
-
react-native-nba-app https://github.com/wwayne/react-native-nba-app
-
开源中国的Git@OSC客户端 http://git.oschina.net/rplees/react-native-gitosc
-
rn_bycloud 帮瀛律师端app https://github.com/liuchungui/rn_bycloud
-
ReactNativeRollingExamples –
react-native的一些example https://github.com/joggerplus/ReactNativeRollingExamples -
Reading App Write In React-Native(Studying and
Programing https://github.com/attentiveness/reading -
数独 –
重拾纯粹数独的乐趣 https://github.com/nihgwu/react-native-sudoku -
Shop-React-Native https://github.com/EleTeam/Shop-React-Native
图书
-
《React Native入门与实战》 http://item.jd.com/11844102.html
-
《React Native开发指南》 http://www.ituring.com.cn/book/1846
-
《React
Native跨平台活动使用开发》 http://item.jd.com/10372998311.html -
《React
Native:用JavaScript开发移动使用》 http://item.jd.com/11785195.html
组件
是因为已经有较好的机件库网站,那里就不做总计。可以平昔查看如下网站,过后或许选取一部分上档次组件出来
😛
-
React-native组件库(相比较全的组件库) https://js.coach/
-
React Native Modules http://reactnativemodules.com/
-
react-native-simple-router https://github.com/react-native-simple-router-community/react-native-simple-router
-
react-native-router-flux https://github.com/aksonov/react-native-router-flux
-
下拉刷新组件 https://github.com/jsdf/react-native-refreshable-listview
-
react-native-navbar https://github.com/react-native-fellowship/react-native-navbar
-
滚动轮播组件 https://github.com/appintheair/react-native-looped-carousel
-
Material React Native (MRN) – Material
Design组件库 https://github.com/binggg/mrn -
react-native-gitfeed –
GitHub客户端(iOS/Android) https://github.com/xiekw2010/react-native-gitfeed -
React-Native-Elements – React
Native样式组件库 https://github.com/react-native-community/React-Native-Elements -
Shoutem UI – React Native样式组件库 https://github.com/shoutem/ui
工具
-
react-native-snippets(代码提醒) https://github.com/Shrugs/react-native-snippets
-
react-native-babel(使用ES6+) https://github.com/roman01la/react-native-babel
-
sqlite for
react-native https://github.com/almost/react-native-sqlite -
gulp-react-native-css(就像写css一样写React
Style) https://github.com/soliury/gulp-react-native-css -
rnpm(React Native Package Manager) https://github.com/rnpm/rnpm
-
Pepperoni – React
Native项目发轫化套件 https://github.com/futurice/pepperoni-app-kit -
Deco IDE – React Native IDE https://www.decosoftware.com/
-
ignite – React Native
CLI项目生成器 https://github.com/infinitered/ignite
资源网站
-
React-native官网 http://facebook.github.io/react-native/
-
React-China社区 http://react-china.org/
-
React Native中文社区 http://bbs.react-native.cn/
-
React-native组件库(比较全的组件库) http://react.parts/
-
React Native Modules http://reactnativemodules.com/
-
Use React Native
资讯站(使用技巧及情报) http://www.reactnative.com/ -
11款React Native开源移动 UI
组件 http://www.oschina.net/news/61214/11-react-native-ui-components -
稀土掘金的 React
标签 http://gold.xitu.io/#/tag/React.js http://gold.xitu.io/#/tag/React%20Native
业界商讨
-
跨平台支付时代的 (再一次) 到来?( Xamarin,NativeScript 和 React
Native 相比)http://onevcat.com/2015/03/cross-platform/ -
谈谈 React Native –
唐巧 http://blog.devtang.com/blog/2015/02/01/talk-about-react-native/ -
怎么着评论React-Native? https://www.zhihu.com/question/27852694/answer/43990708
-
React Native概述:背景、规划轻风险 http://div.io/topic/938
-
Native与Web的融合 –
Qcon中React-Native演讲 http://www.infoq.com/cn/presentations/the-fusion-of-native-and-web -
动用React
Native一年后的感想http://www.dobest.me/blog/2016/06/12/%E4%BD%BF%E7%94%A8React%20Native%E4%B8%80%E5%B9%B4%E5%90%8E%E7%9A%84%E6%84%9F%E5%8F%97/ -
Weex & ReactNative &
JSPatch大对比 http://awhisper.github.io/2016/07/22/Weex-ReactNative-JSPatch/ -
weex&ReactNative对比 https://zhuanlan.zhihu.com/p/21677103