教你快速搭建 React Native 開(kāi)發(fā)環(huán)境
React Native 官網(wǎng)地址：https://www.reactnative.cn/docs/environment-setup
開(kāi)發(fā)平臺(tái) Windows
目標(biāo)平臺(tái) Android
1、安裝依賴(lài)
必須安裝的依賴(lài)有 Node、JDK 和 Android Studio，Node 版本不得低于 14，React Native 需要 JDK 11，查看 JDK 版本的指令如下：
javac -version
1-1、下載和安裝 android studio
1-2、安裝 Android SDK
目前編譯 React Native 應(yīng)用需要的是 Android 12 (S) 版本的 SDK (注意：SDK 版本不等于終端系統(tǒng)版本，RN 目前支持 android 5 以上設(shè)備)
2、配置 ANDROID_SDK_ROOT 環(huán)境變量
3、把一些工具添加到環(huán)境變量 path
打開(kāi)控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量，選中Path變量，然后點(diǎn)擊編輯。點(diǎn)擊新建然后把這些工具目錄路徑添加進(jìn)去：platform-tools、emulator、tools、tools/bin
%ANDROID_SDK_ROOT%\platform-tools %ANDROID_SDK_ROOT%\emulator %ANDROID_SDK_ROOT%\tools %ANDROID_SDK_ROOT%\tools\bin
4、創(chuàng)建新項(xiàng)目
npx react-native init AwesomeProject
5、修改阿里云鏡像
嘗試阿里云提供的maven 鏡像，將android/build.gradle中的jcenter()和google()分別替換為maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多處需要替換）。
6、運(yùn)行項(xiàng)目
cd AwesomeProject yarn android # 或者 yarn react-native run-android
7、如果項(xiàng)目長(zhǎng)時(shí)間無(wú)法啟動(dòng)，可以執(zhí)行如下操作，查看原因
npx react-native start
如上圖，解決端口被占用的問(wèn)題后，重新運(yùn)行項(xiàng)目，即可啟動(dòng) android 模擬器
8、Visual Studio Code 安裝擴(kuò)展程序ES7 React/Redux/GraphQL/React-Native snippets，即可通過(guò) 輸入 rnc 新建一個(gè) react 類(lèi)組件模板
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class App extends Component {
render() {
return (
<View>
<Text> textInComponent </Text>
</View>
)
}
}到此這篇關(guān)于教你快速搭建 React Native 開(kāi)發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)React Native 開(kāi)發(fā)環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React?Context用法小結(jié)(附完整代碼),Context提供了一種新的組件之間共享數(shù)據(jù)的方式，允許數(shù)據(jù)隔代傳遞，而不必顯式的通過(guò)組件樹(shù)逐層傳遞props，本文通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計(jì)理念
這篇文章主要為大家介紹了React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計(jì)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext
這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext,其實(shí)與vue中的ref和reactive一樣，通過(guò)useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時(shí)交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用，需要的朋友可以參考下2022-11-11
Context提供了一個(gè)無(wú)需為每層組件手動(dòng)添加props，就能在組件樹(shù)間進(jìn)行數(shù)據(jù)傳遞的方法。在一個(gè)典型的?React?應(yīng)用中，數(shù)據(jù)是通過(guò)props屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對(duì)于某些類(lèi)型的屬性而言是極其繁瑣的2022-12-12
比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了React hooks的優(yōu)缺點(diǎn)詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
react清空ant.design中表單內(nèi)容的方法實(shí)現(xiàn)
本文主要介紹了react清空ant.design中表單內(nèi)容的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Can't?perform?a?React?state?update?on?an?unmoun
這篇文章主要為大家介紹了Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12