轉載註明出處:
地址:http://www.lcode.org
本文出自:【江清清的技術專欄】
本React Native講解專題:主要講解了React Native開發,由基礎環境搭建配置入門,基礎,進階相關講解。html
剛建立的React Native技術交流1羣(282693535),React Native技術交流2羣(496601483),React Native技術交流3羣(496508742)。歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!前端
關於React Native各類疑難雜症,問題深坑總結方案請點擊查看:react
Mac和Windows安裝搭建React Native環境教程以下:android
(一).基本介紹:
React Native For Android是偉大的互聯網公司Facebook與2015年9月15日發佈的,該能夠讓咱們廣大開發者使用JavaScript和React開發咱們的應用,該提倡組件化開發,也就是說React Native給咱們提供一個個封裝好的組件讓開發者來進行使用,甚至咱們能夠相關嵌套造成新的組件。使用React Native咱們能夠維護多種平臺(Web,Android和IOS)的同一份業務邏輯核心代碼來建立原生應用。現階段Web APP的的體驗仍是沒法達到Native APP的體驗,因此這邊fackbook更增強調的是learn once,write everywhere,應用前端咱們使用js和React來開發不一樣平臺的UI,下層核心模塊編寫複用的業務邏輯代碼,提供應用開發效率。
[特別注意]目前react native在ios上僅支持ios7以上,Android僅支持Android4.1以上。
React Native項目github地址:https://github.com/facebook/react-native
React Native項目官網文檔:http://facebook.github.io/react-native/docs/getting-started.htmlios
(二).基礎入門:
1.React Native For Android環境配置以及第一個實例
2.React Native開發IDE安裝及配置
3.React Native應用設備運行(Running)以及調試(Debugging)
4.React Native移植原生Android項目
5.React Native進行簽名打包成Apk
6.React Native庫版本升級(Upgrading)與降級講解git
7.React Native VSCode IDE超強開發插件介紹(智能,代碼提醒,運行調試…)github
(三).組件學習:
1.React Native控件之View視圖講解
2.1.React Native配置運行官方例子-初學者的福音(Mac OS X版本)
2.2.React Native配置超詳細編譯運行React Native官方實例UIExplorer項目(Windows版本)
3.React Native控件之Text組件講解
4.React Native控件之Image組件講解與美團首頁頂部效果實例
5.React Native控件之TextInput組件講解與QQ登陸界面實現
6.React Native控件之ProgressBarAndroid進度條講解
7.React Native控件之DrawerLayoutAndroid抽屜導航切換組件講解
8.React Native控件之ScrollView組件講解
9.WebStorm開發工具設置React Native代碼智能提醒
10.React Native控件之ToolbarAndroid工具欄控件講解以及使用
11.React Native控件之Switch開關與Picker選擇器組件講解以及使用
12.React Native控件之ViewPagerAndroid講解以及美團首頁頂部效果實例
13.React Native控件之Touchable*系列組件詳解
14.React Native控件之ListView組件講解以及詳細實例
15.React Native控件之PullToRefreshViewAndroid下拉刷新組件講解
16.React Native控件之RefreshControl組件詳解
17.React Native控件之WebView組件詳解以及實例使用
18.React Native控件之Navigator組件詳解以及實例
19.React Native 控件之Cilpboard粘貼板使用詳解web
20.React Native控件之DatePickerAndroid時間日期選擇器組件講解windows
21.React Native控件之StatusBar狀態欄詳解react-native
22.React Native控件之PickerIOS選擇器詳解-適配iOS開發
22.React Native 控件之SegmentedControlIOS分段組件詳解-適配iOS開發
23.React Native控件之SliderIOS滑塊組件詳解-適配iOS開發
24.React Native控件之TabBarIOS和TabBarIOS.Item組件詳解及實例
25.React Native控件之ProgressViewIOS進度加載組件詳解及實例
26.React Native控件之ActivityIndicatorIOS進度指示器組件詳解及實例
27.React Native控件之TimePickerAndroid時間選擇器組件詳解及實例
(三).API模塊學習:
1.React Native API模塊之ToastAndroid詳解及使用
2.React Native API模塊之Alert彈出框詳解及使用
3.React Native API模塊之AppState詳解
4.React Native API模塊之NetInfo(網絡信息)使用詳解
5.React Native API模塊之AsyncStorage(持久化存儲)使用詳解
6.React Native API模塊Dimensions屏幕寬高詳解
7.React Native API模塊BackAndroid攔截返回鍵事件處理詳解
8.React Native API模塊StyleSheet樣式表詳解
9.React Native API模塊PixelRatio設備像素密度詳解
10.React Native API模塊之AlertIOS彈框詳解-適配iOS開發
11.React Native API模塊之AppStateIOS運行狀態詳解-適配iOS開發
12.React Native API模塊之ActionSheetIOS可點擊彈框詳解-適配iOS開發
(四).React Native進階:
1.React Native超棒的LayoutAnimation(佈局動畫)
2.React Native控件之組件封裝實例(Button按鈕)
(五).React Native開源項目:
1.Pober Wong_17童鞋爲gank.io作的純React Native項目,開源地址:https://github.com/Bob1993/React-Native-Gank
2.聶風童鞋作的《都看影視》React Native項目,開源地址:https://github.com/changfuguo/doukanmv
3.大大作的《新聞閱讀Reading》React Native項目,項目地址:http://www.lcode.org/reading-app-react-native/
4.公子小白作的《親戚稱謂計算器》React Native項目,項目地址:http://www.lcode.org/counterrelative-react-native/
5.﹌海雲天♂作的純React Native iOS開源項目,開源地址:http://www.lcode.org/react-native-lagou/ 或者文章地址:http://www.lcode.org/react-native-lagou-source/
6.成都 - just4fun作的純React Native iOS開源項目,項目地址:http://www.lcode.org/uestc-bbs-react-native/
7.lookingstars作的純React Native 仿美團iOS開源項目,項目地址:http://www.lcode.org/react-native-meituan-source/
8.race604作的純React Native 知乎日報開源項目(Android/iOS),開源地址:https://github.com/race604/ZhiHuDaily-React-Native
9.@vczero作的純React Native豆瓣搜索客戶端,開源地址:http://www.lcode.org/react-native-dou-source/
10.@tabalt作的純React Native新聞客戶端,開源地址:http://www.lcode.org/react-native-news-source/
11.@starzhy作的純React Native碼農iOS客戶端,項目地址:http://www.lcode.org/react-native-source-manong/
12.@iSimar作的純React Native Hacker新聞客戶端(Android、iOS),項目地址:http://www.lcode.org/react-native-source-hacker/
13.@xiekw2010作的純React Native Github客戶端,兼容Android、iOS平臺,開源地址:http://www.lcode.org/react-native-source-gitfeed/
14.@kailuo99作的純React Native 資訊頭條客戶端,主要適配iOS平臺,項目地址:http://www.lcode.org/react-native-source-zixunapp/
15.@SFantasy作的純React Native 資訊頭條客戶端,主要適配iOS平臺,項目地址:http://www.lcode.org/react-native-source-weibo/