React Native 官網(wǎng)地址：https://www.reactnative.cn/docs/environment-setup

開發(fā)平臺 Windows

目標平臺 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變量，然后點擊編輯。點擊新建然后把這些工具目錄路徑添加進去：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)建新項目

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、運行項目

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

7、如果項目長時間無法啟動，可以執(zhí)行如下操作，查看原因

npx react-native start

如上圖，解決端口被占用的問題后，重新運行項目，即可啟動 android 模擬器

8、Visual Studio Code 安裝擴展程序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)文章希望大家以后多多支持腳本之家！

最新評論