前言
本項(xiàng)目與菜譜項(xiàng)目是一個(gè)對(duì)比;有興趣的可以了解下
本項(xiàng)目的使用react-native提供的傳統(tǒng)state和props管理搭建項(xiàng)目。菜譜項(xiàng)目是使用react-redux,redux土童，react-navigation;
我本著使用最原始的構(gòu)建方式目的是為了和用redux,react-redux構(gòu)建項(xiàng)目做一個(gè)對(duì)比荸实，為各位對(duì)兩者搭建項(xiàng)目的不同列出簡(jiǎn)單的對(duì)比;
在菜譜項(xiàng)目會(huì)詳細(xì)介紹redux,react-redux的使用
傳統(tǒng)方式
- 組件管理
state，當(dāng)一個(gè)組件交互多的時(shí)候惭载，state中的值越來越龐大旱函，簡(jiǎn)單的通過setState更新UI這會(huì)讓你管理state更加的不易，這樣會(huì)把應(yīng)用邏輯放在組件中描滔，會(huì)使組件代碼量越來越多 - 通過
props傳值和回調(diào)棒妨。通過props正向傳值沒什么問題，但是當(dāng)組件的封裝層級(jí)越深,反傳就會(huì)越復(fù)雜含长，這就導(dǎo)致回調(diào)很多層次才達(dá)到你想把子組件的值回調(diào)目的組件券腔，這使得逆向傳值復(fù)雜化
redux的方式
-
store管理state,當(dāng)然也可以在組件中管理state(不推薦使用), 全局的方式 -
action編寫應(yīng)用邏輯, 不管封裝多少層, 你都可以在子組件中通過connect方法連接action,action通過dispatch通知負(fù)責(zé)目的父組件state的reducer更新state中的變量, 更新父組件,組件中的邏輯代碼被抽開，在這里可以編寫交互事件的邏輯拘泞，網(wǎng)絡(luò)請(qǐng)求纷纫，數(shù)據(jù)處理等，降低了模塊間耦合度 -
reducer管理state的更新與否陪腌，當(dāng)然最好配合Immutable使用更加方便
學(xué)習(xí)經(jīng)歷
目前移動(dòng)端的混合開發(fā)越來與火了,目前比較成熟的混合開發(fā)框架包括react-native,Ionic,Weex等,總之很多
相比下react-native還是蠻火的辱魁，不僅有成熟的web框架react,還有react-native開發(fā)移動(dòng)app
我前段時(shí)間學(xué)習(xí)react-native的學(xué)習(xí)歷程
-
react-native官方網(wǎng)站api - 開源項(xiàng)目
個(gè)人學(xué)習(xí)中做的小Demo,有興趣可以共同學(xué)習(xí)一下
react-native-learn不斷更新...
github源碼---react-native-weather
項(xiàng)目簡(jiǎn)介
純粹使用react-native的UI組件和提供的Animated Api實(shí)現(xiàn)的一款天氣預(yù)報(bào)的app；功能主要包括：城市列表偷厦，城市搜索商叹，城市添加燕刻，設(shè)置默認(rèn)城市只泼，15天天氣預(yù)報(bào)，24小時(shí)天氣詳情卵洗，生活指數(shù)请唱，天氣詳情。
技術(shù)點(diǎn)實(shí)現(xiàn)：
- 分頁組件
- 仿
iOS的搜索框 - 毛玻璃效果
- 側(cè)滑刪除过蹂，設(shè)置默認(rèn)
-
FlatList橫向 - 導(dǎo)航組件
- 組件數(shù)據(jù)流的傳遞
- 基于
react-native實(shí)現(xiàn)的簡(jiǎn)單動(dòng)畫 - 導(dǎo)航條的封裝
- 手勢(shì)與動(dòng)畫相結(jié)合的滑動(dòng)效果的實(shí)現(xiàn)
項(xiàng)目截圖
使用框架
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-blur": "^3.1.2",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-drawer": "^2.3.0",
"react-native-swipeout": "^2.0.13"
-
react-native-deprecated-custom-components是facebook廢棄的組件框架- 項(xiàng)目用到了
naviagtor實(shí)現(xiàn)導(dǎo)航組件, 在0.44.0的react-native已經(jīng)被廢棄,官方已經(jīng)推薦react-navigation,下一個(gè)菜譜項(xiàng)目項(xiàng)目會(huì)用到
- 項(xiàng)目用到了
-
react-native-swipeout實(shí)現(xiàn)側(cè)滑功能
-
react-native-drawer實(shí)現(xiàn)側(cè)邊欄效果
-
react-native-blur實(shí)現(xiàn)毛玻璃效果
項(xiàng)目安裝,運(yùn)行
下載
git clone https://github.com/liuboshuo/react-native-weather.git
安裝
切換到項(xiàng)目工作環(huán)境,在terminal執(zhí)行
npm install
react-native link react-native-blur
運(yùn)行
react-native run-android
Run android avd and start an emulator
react-native run-ios
心得
- 使用傳統(tǒng)的方式編寫復(fù)雜的業(yè)務(wù)邏輯十绑，這樣會(huì)使代碼量多，模塊依賴嚴(yán)重
- 我們都知道web編寫style是一件繁瑣的事情酷勺，雖然react-native的style比web的css更簡(jiǎn)單本橙。但是當(dāng)app復(fù)雜化的時(shí)候(比如管理皮膚)，怎么樣管理app的統(tǒng)一style? 求解脆诉？
