日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

教你快速搭建?React?Native?開發環境_React

作者:rogerwu ? 更新時間: 2022-10-27 編程語言

React Native 官網地址:https://www.reactnative.cn/docs/environment-setup

開發平臺 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 應用需要的是 Android 12 (S) 版本的 SDK (注意:SDK 版本不等于終端系統版本,RN 目前支持 android 5 以上設備)

2、配置 ANDROID_SDK_ROOT 環境變量

3、把一些工具添加到環境變量 path

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量,選中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、創建新項目

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、如果項目長時間無法啟動,可以執行如下操作,查看原因

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>
    )
  }
}

原文鏈接:https://www.cnblogs.com/rogerwu/p/16636720.html

欄目分類
最近更新