RN搭建開發(fā)環(huán)境
? ? 1.安裝依賴軟件:
? ? ? ? Node.js? ? ? 8.3以上? ? ?
? ? ? ? ? ? D:\Program Files\nodejs\
? ? ? ? Python? ? ? 2.x以上? ?
? ? ? ? ? ? D:\Python27\? ? ? ?
? ? ? ? ? ? D:\Python27\Scripts
? ? ? ? JDK? ? ? ? ? 1.8? ? ? ? ?
? ? ? ? ? ? Java_Home=C:\Program Files\Java\jdk1.8.0_65? ? ?
? ? ? ? ? ? %Java_Home%\bin
? ? ? ? Android SDK? ? ? ? ? ? ?
? ? ? ? ? ? ANDROID_HOME=D:\AndroidStudio\SDK
? ? ? ? ? ? %ANDROID_HOME%\platform-tools
? ? ? ? ? ? %ANDROID_HOME%\tools
? ? 2.Yarn宽涌、React Native的命令行工具
? ? ? ? Yarn與npm都是軟件管理工具平夜,Yarn速度快很多
? ? ? ? npm(該命令是node.js中的命令,用于安裝軟件)
? ? ? ? 設(shè)置npm鏡像:
? ? ? ? ? ? npm config set registry https://registry.npm.taobao.org --global
? ? ? ? ? ? npm config set disturl https://npm.taobao.org/dist --global
? ? ? ? Yarn卸亮、React Native的命令行工具(react-native-cli)
? ? ? ? ? ? npm install -g yarn react-native-cli
? ? ? ? 安裝完yarn后同理也要設(shè)置鏡像源:
? ? ? ? ? ? yarn config set registry https://registry.npm.taobao.org --global
? ? ? ? ? ? yarn config set disturl https://npm.taobao.org/dist --global
? ? ? ? 測(cè)試:
? ? ? ? ? ? react-native --version? ?
? ? ? ? ? ? yarn -v
? ? 3.環(huán)境使用
? ? ? ? ? ? React開發(fā)環(huán)境:VScode
? ? ? ? ? ? ? ? Node.js? ? ? 8.3以上
? ? ? ? ? ? Android環(huán)境(編譯運(yùn)行環(huán)境):AS
? ? ? ? ? ? ? ? SDK platform:開發(fā)版本庫(kù)
? ? ? ? ? ? ? ? ? ? Android SDK Platform 26? ? (0.56)? ?
? ? ? ? ? ? ? ? ? ? Android SDK Platform 23? ? (0.55.4)
? ? ? ? ? ? ? ? ? ? Google Api Intel x86 Atom_64 System Image? ;? intel HAXM? (創(chuàng)建虛擬機(jī)使用)
? ? ? ? ? ? ? ? SDK bulid tools:代碼編譯工具
? ? ? ? ? ? ? ? ? ? 26.0.3? ? ? ? ? ? ? ? ? ? (0.56)
? ? ? ? ? ? ? ? ? ? 23.0.1? ? ? ? ? ? ? ? ? ? (0.55.4)
? ? 4.創(chuàng)建項(xiàng)目運(yùn)行到模擬器:
? ? ? ? 方式一:
? ? ? ? ? ? 1.創(chuàng)建項(xiàng)目
? ? ? ? ? ? ? ? react-native init HelloWorld
? ? ? ? ? ? ? ? react-native init HelloWorld --version 0.55.4?
? ? ? ? ? ? 2.進(jìn)入到項(xiàng)目目錄中
? ? ? ? ? ? ? ? cd HelloWorld? ? 目錄cmd
? ? ? ? ? ? 3.運(yùn)行
? ? ? ? ? ? ? ? react-native run-android
? ? ? ? 方式二:
? ? ? ? ? ? 1.導(dǎo)入新項(xiàng)目
? ? ? ? ? ? ? ? 使用其他可用項(xiàng)目即可
? ? ? ? ? ? 2.進(jìn)入到項(xiàng)目目錄中
? ? ? ? ? ? ? ? cd HelloWorld? ? 目錄cmd
? ? ? ? ? ? 3.運(yùn)行
? ? ? ? ? ? ? ? react-native run-android
? ? ? ? 方式三:
? ? ? ? ? ? Android Studio打開android項(xiàng)目忽妒,編譯運(yùn)行,到模擬器
? ? ? ? ? ? ? ? 模擬器配置設(shè)置:
? ? ? ? ? ? ? ? ? ? 搖一搖:?jiǎn)?dòng)設(shè)置頁(yè)面? ? ? Ctrl+M
? ? ? ? ? ? ? ? ? ? HOST:配置服務(wù)連接地址:? 11.11.11.11:8081
? ? ? ? ? ? 開啟node服務(wù):
? ? ? ? ? ? ? ? npm start開啟
? ? ? ? 方式四:
? ? ? ? ? ? 直接使用.apk文件轉(zhuǎn)入模擬器
? ? ? ? ? ? ? ? 模擬器配置設(shè)置:
? ? ? ? ? ? ? ? ? ? ? ? 搖一搖:?jiǎn)?dòng)設(shè)置頁(yè)面? ? ? Ctrl+M
? ? ? ? ? ? ? ? ? ? ? ? HOST:配置服務(wù)連接地址:? 11.11.11.11:8081
? ? ? ? ? ? 開啟node服務(wù):
? ? ? ? ? ? ? ? ? ? npm start開啟
? ? 5.RN常用命令:
? ? ? ? react-natice init HelloWorld
? ? ? ? react-native init HelloWorld --version 0.55.4?
? ? ? ? react-native --version
? ? ? ? react-native run-android
? ? ? ? react-narive run-ios?
? ? ? ? npm install -g yarn react-native-cli? ? 安裝軟件
? ? ? ? npm start? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 開啟Node服務(wù)