在 Android 上开始使用 React Native

2020-08-07 08:00:00 · 飞浪

简介ReactNative是最著名的开源混合框架之一，使用单一代码库的JavaScript为Android、iOS和Web平台构建应用程序。 “ReactNative”这个名称由两个单词组成：R

简介 React Native 是最著名的开源混合框架之一，使用单一代码库的 JavaScript 为 Android、iOS 和 Web 平台构建应用程序。

“React Native”这个名称由两个单词组成：React 和 Native。“React”表示使用 React 应用开发环境，“Native”表示使用原生 Android/iOS/Web UI 小部件来开发应用以获得更好的性能。React Native 在运行时通过 JavaScript 与 Native 平台交互，为 React Native UI 组件构建原生视图。React Native 还提供了用于 UI 开发的现成内置 API，例如<ScrollView>、<FlatList>、<ImageView>等，以开发应用。

本指南介绍使用标准npx react-native CLI 在 Android 上进行 React Native 开发的基础知识。

React Native 与 React

React Native 建立在 React 框架之上，但它使用不同的 API 和技术来使 React 应用与 Native 移动平台兼容：

开发工具：React Native 需要为 Android 设置 Android Studio，为 iOS 开发设置 XCode。对于 React Native 项目开发，可以使用 Atom、Notepad++、Sublime 或 Visual Studio Code 等 IDE。
UI Widget：React Native 提供了一套全面的 API（UI 组件）来为 React Native 应用构建 UI，因此没有 HTML，只有预定义的核心组件 API来构建 UI 界面。
样式：React Native 不使用 CSS 或 HTML。相反，它使用StyleSheet API 对象（如 JSON）来定义小部件（视图或 UI 组件）的样式属性。
UI 结构：为了模仿 Native UI，React Native 使用核心 UI API 来构建界面，因此没有DOM或窗口对象。
平台特定的 UI：仍有一些 API 不受 React Native 核心 UI 组件（如 Map）支持，因此 React Native 提供了创建本机模块的支持，以创建包装器来使用平台特定的 API 或第三方模块。

博览会 CLI

如前所述，标准的 React Native create-react-native-app CLI 需要 Native 开发工具（Android Studio 或 XCode）和其他 npm 包（例如 Camera 和 Map）来构建特定功能。Expo CLI 通过以下功能克服了标准 React Native CLI 的局限性：

expo 项目可以直接在浏览器中运行，无需任何外部依赖（XCode 或 Android studio）。
Expo 提供通过链接或二维码轻松共享应用程序的功能，这对于发布和测试更新非常有用。
Expo 提供内置 API，例如相机、短信等。

Expo 是标准 React Native CLI 的增强版本，用于快速设计、开发和发布，但尽管 Expo 有很多优点，但也有一些局限性：

不支持需要 Native 代码的 Native 模块或外部库。
Expo 涵盖了各种各样的 API，但它仍然不支持所有 Native API。

Expo 是一种在浏览器中快速开始使用 React Native 开发的简单方法。Expo 还支持unimodules，以便在 React Native 应用中使用 Expo SDK。

先决条件

React Native 遵循与 React 类似的开发结构和工具，因此本指南假设您具备以下技术和工具的基础知识。

技术

JavaScript 基础知识
HTML、对象和 EcmaScript 6（ES6 类和箭头函数等）

工具

Node.js
命令行界面 (CLI)

开发环境设置

npx react-native init需要外部工具，因此请按照以下步骤根据操作系统下载并安装所需的工具：

MacOS 或 Linux

使用brew -v验证 Homebrew 安装，如果未安装 Homebrew，则使用以下方法安装Homebrew

      /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
    

注意：Homebrew 安装需要xcode-select命令行工具才能工作，因此建议也安装 Xcode，否则它会要求确认xcode-select工具的安装。

安装节点和守望者

      brew install node watchman

使用break cask安装 JDK来安装 GUI 软件安装设置

      brew cask install adoptopenjdk/openjdk/adoptopenjdk8

根据操作系统下载Android Studio并进行官方安装步骤（来自视频）。
在 React Native 的环境变量中添加所需的 android SDK 依赖项的路径：

      # can use any editor instead of open
open ~/.bash_profile
    

将以下文本粘贴到文件末尾

      # after other pre-configured environment variables
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
    

MacOS Cataline 有一个默认 shell 是zsh，因此要修复下面的警告，请为 Cataline编辑/创建~/.zprofile (在/users/username/下) 文件。

      chsh -s /bin/zsh
# create the .zprofile under users/your_user_name and copy content from bash_profile, save it
source ~/.zprofile
    

有用的命令

printenv打印所有环境变量。
xcode-select --version允许您查看 xcode-select CLI 的版本。

视窗

下载Chocolatey包管理器并在命令提示符中运行以下命令（以管理员身份运行）：

      choco install -y nodejs.install python2 openjdk8

根据操作系统下载Android Studio并按照官方安装步骤（附视频）进行操作。
Add the default android SDK path in environment variables, and make sure to replace UserName with your username:

      setx ANDROID_HOME "C:\Users\UserName\AppData\Local\Android\SDK"

and add platform-tools to PATH variable. Make sure to replace UserName with your user name:

      setx /M PATH "%PATH%;C:\Users\UserName\AppData\Local\Android\SDK\platform-tools"
    

Create and Run a React Native Project

The steps to run the project is the same on all operating systems:

Create a React Native project:

      npx react-native init RNClickCounter

Follow the steps to create an android virtual device (AVD)
Run the projects:

      cd RNClickCounter
npx react-native run-android --verbose
    

The above command process may ask to install CocoaPods, which is a dependency manager for iOS projects and required to run iOS apps.

In the above command, --verbose is optional but useful to view any potential issues, like below.

Known Gradle Issues

InvokerHelper Error: Gradle version 6.1.1 can cause this issue, so make sure to update distributionUrl attribute in RNClickCounter\android\gradle\wrapper\gradle-wrapper.properties file:

      # To fix the "Could not initialize class org.codehaus.groovy.runtime.InvokerHelper" error, use latest gradle
distributionUrl=https\://services.gradle.org/distributions/gradle-6.5.1-all.zip
    

and update classpath in RNClickCounter\android\build.gradle:

      classpath("com.android.tools.build:gradle:4.0.0")

<div class="title aem-GridColumn--tablet--12 aem-G

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 Android 上开始使用 React Native

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

# after other pre-configured environment variables export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools