? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2018-09-09-0-15
----------------有時(shí)候差之毫厘謬以千里秦躯，比如剛剛發(fā)布的文章是9-8-11:58左右鲫忍，而現(xiàn)在已經(jīng)是第二天（9-9-0-15）了俯萌。失去的東西會(huì)有遺憾峻堰，但是再也回不來了咽袜，而你所見的永遠(yuǎn)也沒有曾經(jīng)的那么好丸卷，陪伴我的只有代碼.......
步驟如下（window系統(tǒng)）：
? ? 1，先下載安裝好node,（安裝的時(shí)候npm（node包管理工具）會(huì)自動(dòng)安裝）
? ? 2询刹，npm install -g yarn react-native-cli@1.2.0 ////安裝好react-native-cli谜嫉，這里要帶上版本號(hào)1.2.0
? ? ?//安裝完 yarn 后同理也要設(shè)置鏡像源：
? ? ? 3,yarn config set registry https://registry.npm.taobao.org --global
? ? ? ? ? yarn config set disturl https://npm.taobao.org/dist --global
? ? ? 4,npm install -g yarn react-native@0.55.4? ?// 指定安裝0.55.4版本的react-native
? ? ? 5,react-native init --version="0.55.4" myprojectname（AwesomeProject）//創(chuàng)建版本號(hào)為?0.55.4版本的項(xiàng)目
? ? ? 6，cd myprojectname
? ? ?7,在as上打開你的myprojectname文件夾下的android項(xiàng)目凹联，配置好版本沐兰，并build project,
? ? ? 8，連接好手機(jī)蔽挠，執(zhí)行命令：react-native run-android //運(yùn)行項(xiàng)目住闯，
這里提示為什么剛才要帶上版本號(hào)，2018年9月9號(hào)0:31分澳淑，這段時(shí)間最新的react-native的版本號(hào)是0.56.0比原，react-native-cli是2.1.0，不帶版本號(hào)的話默認(rèn)的生成的就是這個(gè)版本號(hào)杠巡，但是量窘，這個(gè)版本號(hào)開發(fā)Android的時(shí)候有bug，最終會(huì)報(bào)Access...info的錯(cuò)誤,最后你還是要卸載氢拥，然后安裝
一般不知道版本號(hào)時(shí)的流程：
1蚌铜，npm install -g yarn react-native-cli,
?2嫩海，yarn config set registry https://registry.npm.taobao.org --global
? ? ? ?yarn config set disturl https://npm.taobao.org/dist --global
3冬殃，react-native init AwesomeProject? //創(chuàng)建AwesomeProject 項(xiàng)目
4，cd?AwesomeProject //進(jìn)入AwesomeProject 文件夾
5,?react-native run-android? //運(yùn)行android項(xiàng)目
6,出錯(cuò)
7叁怪，npm uninstall -g react-native-cli //卸載?react-native
8审葬，npm install yarn react-native@0.55.4（穩(wěn)定版本）或者0.59.8
9，npm install -g yarn react-native-cli@1.2.0
10，react-native init --version="0.55.4" myprojectname（AwesomeProject）//創(chuàng)建版本號(hào)位0.55.4版本的項(xiàng)目
??????? react-native init --version="0.59.8" myprojectname（AwesomeProject）//創(chuàng)建版本號(hào)位0.59.8版本的項(xiàng)目
11耳璧，cd myprojectname
12成箫，在as上配置好版本，并build project
13旨枯，,react-native run-android //運(yùn)行項(xiàng)目蹬昌，
以后創(chuàng)建react-native項(xiàng)目從第10步到第13步就行了；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2018年9月9日
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?袁鎮(zhèn)
yarn add react-native-gesture-handler@1.2.1
react-native link react-native-gesture-handler
react-native自帶的PanResponder手勢監(jiān)視器由JS響應(yīng)器系統(tǒng)控制而react-native-gesture-handler是在UI線程中識(shí)別和跟蹤手勢攀隔。 若使用RN官方提供的手勢管理在與發(fā)生在主線程上的觸摸交互(如iOS滑塊或任何滾動(dòng)視圖)時(shí)皂贩，經(jīng)常會(huì)遇到問題。==由于主線程必須同步?jīng)Q定JS或滾動(dòng)視圖是否應(yīng)該成為響應(yīng)器昆汹，而JS只能異步響應(yīng)并不能立即拒絕Native事件的響應(yīng)明刷，導(dǎo)致手勢操作被這些Native組件劫持。== ps: 上面提到的JS不能立即拒絕Native事件的響應(yīng)對(duì)應(yīng)PanResponder中的onPanResponderTerminationRequest方法满粗，當(dāng)該方法返回false時(shí)表示拒絕其他組件響應(yīng)當(dāng)前的手勢辈末。
npm install react-native-fs@2.13.3 --save
react-native link react-native-fs
將文本寫入本地 txt 讀取txt文件內(nèi)容 在已有的txt上添加新的文本 刪除文件 下載文件(圖片、文件映皆、視頻挤聘、音頻) 上傳文件 only iOS
yarn add @react-native-community/async-storage@1.5.0
react-native link @react-native-community/async-storage react-native
本地文件
存儲(chǔ)數(shù)據(jù) storeData = async () => { try { await AsyncStorage.setItem('@storage_Key', 'stored value') } catch (e) { // saving error } }
讀取數(shù)據(jù) getData = async () => { try { const value = await AsyncStorage.getItem('@storage_Key') if(value !== null) { // value previously stored } } catch(e) { // error reading value } }
npm install react-native-picker@4.3.7 --save
react-native link react-native-picker react-native
調(diào)用本地相機(jī)功能
yarn add @react-native-community/async-storage@1.5.0
?react-native link @react-native-community/async-storage
npm install react-native-view-shot@2.6.0
?react-native link react-native-view-shot
1,可以截取當(dāng)前屏幕或者按照當(dāng)前頁面的組件來選擇截取，如當(dāng)前頁面有一個(gè)圖片組件捅彻，一個(gè)View組件组去，可以選擇截取圖片組件或者View組件。支持iOS和安卓步淹。 1,需要將分享頁生成圖片从隆，并分享到微信好友與朋友圈。
?yarn add react-native-image-picker@0.28.1
react-native link react-native-image-picker
用圖片選擇器react-native-image-picker拍照缭裆、選照片 發(fā)布：2018/3/7 有時(shí)我們程序中需要提供用戶上傳照片的功能键闺。照片可以從設(shè)備相冊中選擇，也可以使用攝像頭直接拍攝幼驶。這個(gè)功能使用 react-native-image-picker 庫就可以很方便的實(shí)現(xiàn)艾杏。
**npm與yarn對(duì)比**
Yarn的優(yōu)點(diǎn)？? 速度快 盅藻。速度快主要來自以下兩個(gè)方面：1.并行安裝：無論 npm 還是 Yarn 在執(zhí)行包的安裝時(shí)购桑，都會(huì)執(zhí)行一系列任務(wù)。npm 是按照隊(duì)列執(zhí)行每個(gè) package氏淑，也就是說必須要等到當(dāng)前 package 安裝完成之后勃蜘，才能繼續(xù)后面的安裝。而 Yarn 是同步執(zhí)行所有任務(wù)假残，提高了性能缭贡。2.離線模式：如果之前已經(jīng)安裝過一個(gè)軟件包炉擅，用Yarn再次安裝時(shí)之間從緩存中獲取，就不用像npm那樣再從網(wǎng)絡(luò)下載了阳惹。?安裝版本統(tǒng)一：為了防止拉取到不同的版本谍失，Yarn 有一個(gè)鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號(hào)。每次只要新增了一個(gè)模塊莹汤，Yarn 就會(huì)創(chuàng)建（或更新）yarn.lock 這個(gè)文件快鱼。這么做就保證了，每一次拉取同一個(gè)項(xiàng)目依賴時(shí)纲岭，使用的都是一樣的模塊版本抹竹。npm 其實(shí)也有辦法實(shí)現(xiàn)處處使用相同版本的 packages，但需要開發(fā)者執(zhí)行 npm shrinkwrap 命令止潮。這個(gè)命令將會(huì)生成一個(gè)鎖定文件窃判，在執(zhí)行 npm install 的時(shí)候，該鎖定文件會(huì)先被讀取喇闸，和 Yarn 讀取 yarn.lock 文件一個(gè)道理袄琳。npm 和 Yarn 兩者的不同之處在于，Yarn 默認(rèn)會(huì)生成這樣的鎖定文件仅偎，而 npm 要通過 shrinkwrap 命令生成 npm-shrinkwrap.json 文件跨蟹，只有當(dāng)這個(gè)文件存在的時(shí)候雳殊，packages 版本信息才會(huì)被記錄和更新橘沥。? 更簡潔的輸出：npm 的輸出信息比較冗長。在執(zhí)行 npm install的時(shí)候夯秃，命令行里會(huì)不斷地打印出所有被安裝上的依賴座咆。相比之下，Yarn 簡潔太多：默認(rèn)情況下仓洼，結(jié)合了 emoji直觀且直接地打印出必要的信息介陶，也提供了一些命令供開發(fā)者查詢額外的安裝信息。 ? 多注冊來源處理：所有的依賴包色建，不管他被不同的庫間接關(guān)聯(lián)引用多少次哺呜，安裝這個(gè)包時(shí)，只會(huì)從一個(gè)注冊來源去裝箕戳，要么是 npm 要么是 bower, 防止出現(xiàn)混亂不一致某残。 ? 更好的語義化： yarn改變了一些npm命令的名稱，比如 yarn add/remove陵吸，感覺上比 npm 原本的 install/uninstall 要更清晰
**npm的未來**：
npm5.0 有了yarn的壓力之后玻墅，npm做了一些類似的改進(jìn)。 1.默認(rèn)新增了類似yarn.lock的 package-lock.json壮虫； 2.git 依賴支持優(yōu)化：這個(gè)特性在需要安裝大量內(nèi)部項(xiàng)目（例如在沒有自建源的內(nèi)網(wǎng)開發(fā)）澳厢，或需要使用某些依賴的未發(fā)布版本時(shí)很有用。在這之前可能需要使用指定 commit_id 的方式來控制版本。 3.文件依賴優(yōu)化：在之前的版本剩拢，如果將本地目錄作為依賴來安裝线得，將會(huì)把文件目錄作為副本拷貝到 node_modules 中。而在 npm5 中徐伐，將改為使用創(chuàng)建 symlinks 的方式來實(shí)現(xiàn)（使用本地 tarball 包除外）框都，而不再執(zhí)行文件拷貝。這將會(huì)提升安裝速度呵晨。目前yarn還不支持魏保。 總結(jié) 在npm5.0之前，yarn的優(yōu)勢特別明顯摸屠。但是在npm之后谓罗，通過以上一系列對(duì)比，我們可以看到 npm5 在速度和使用上確實(shí)有了很大提升季二，值得嘗試檩咱，不過還沒有超過yarn。 綜上我個(gè)人的建議是如果你已經(jīng)在個(gè)人項(xiàng)目上使用 yarn胯舷，并且沒有遇到更多問題刻蚯，目前完全可以繼續(xù)使用。但如果有兼容 npm 的場景桑嘶，或者身處在使用 npm炊汹，cnpm，tnpm 的團(tuán)隊(duì)逃顶，以及還沒有切到 yarn 的項(xiàng)目讨便，那現(xiàn)在就可以試一試 npm5 了。
Yarn和npm命令對(duì)比
?npm??????????????????????????????????????????????????????????????????? yarn
npm install?????????????????????????????????????????????????????????? yarn
npm install react --save???????????????????????????????????? yarn add react
npm uninstall react --save???????????????????????????????? yarn remove react
npm install react --save-dev???????????????????????????? yarn add react --dev
npm update --save??????????????????????????????????????????? yarn upgrade
npm版本的安裝：
npm install react-native@0.59.8
npm install react-native-view-shot@2.6.0 --save
react-native link react-native-view-shot
npm install react-native-fs@2.13.3? --save
react-native link react-native-fs
npm install react-native-gesture-handler@1.2.1 --save
react-native link react-native-gesture-handler
npm install @react-native-community/async-storage@1.5.0 --save
react-native link @react-native-community/async-storage
npm install react-native-image-picker@0.28.1 --save
react-native link react-native-image-picker
npm install react-native-picker@4.3.7 --save
react-native link react-native-picker
npm install react-native-splash-screen@3.2.0 --save
react-native link react-native-splash-screen
npm install buffer@5.4.3
npm install moment@2.24.0
npm install prop-types@15.7.2
npm install react@16.8.3
npm install react-native-easy-toast@1.2.0
npm install react-native-image-zoom-viewer@2.2.26
npm install react-native-loading-spinner-overlay@1.0.1
npm install react-native-modal-dropdown@0.6.2
npm install react-native-storage@1.0.1
npm install react-native-textarea@1.0.3
npm install react-navigation@1.5.2
