教你快速搭建 React Native 開發(fā)環(huán)境
React Native 官網(wǎng)地址：https://www.reactnative.cn/docs/environment-setup
開發(fā)平臺 Windows
目標(biāo)平臺 Android
1、安裝依賴
必須安裝的依賴有 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
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(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í)行如下操作，查看原因
npx react-native start
如上圖，解決端口被占用的問題后，重新運(yùn)行項(xiàng)目，即可啟動 android 模擬器
8、Visual Studio Code 安裝擴(kuò)展程序ES7 React/Redux/GraphQL/React-Native snippets，即可通過 輸入 rnc 新建一個 react 類組件模板
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 開發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)React Native 開發(fā)環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題
這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react PropTypes校驗(yàn)傳遞的值操作示例
這篇文章主要介紹了react PropTypes校驗(yàn)傳遞的值操作,結(jié)合實(shí)例形式分析了react PropTypes針對傳遞的值進(jìn)行校驗(yàn)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-04-04
在React中,編寫樣式主要有以下幾種方式,內(nèi)聯(lián)樣式,外部樣式表,CSS Modules,Styled Components,Emotion和Radium這六種樣式,下面我將針對上面提到的6種方式給出詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復(fù)用性極高,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
React項(xiàng)目搭建與Echarts工具使用詳解
這篇文章主要介紹了React項(xiàng)目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
React組件三大核心屬性State?props?Refs介紹
組件實(shí)例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到?this，也就不存在組件實(shí)例這種說法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2023-02-02
這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
這篇文章主要介紹了React jsx轉(zhuǎn)換與createElement使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐
本文主要介紹了React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了對于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12