React没有android studio xcode的本机完整设置

I just started learning React native by just following getting started, First I need to set up an environment for react native so I refer some blogs, and in all of them pointing towards one direction that I need an android studio and Xcode. So in short, when I setting up the Android environment for react native it requires me to install Android Studio then I was thinking Why I need to install Android Studio? I don’t want to code in java plus it requires a lot of memory space then I looking for an alternative whether I can setup react native without an android studio or not. same with IOS also. So I did that setup without an android studio.

我刚开始学习母语做出React仅通过以下起步 ，首先我需要建立一个环境React本土，所以我是指一些博客，并在所有的人都指向一个方向，我需要一个机器人工作室和Xcode的。 简而言之，当我为响应本机设置Android环境时，它要求我安装Android Studio，然后我在想为什么要安装Android Studio？ 我不想用Java编写代码，而且它需要大量的内存空间，所以我想寻找一种替代方法，是否可以在没有android studio的情况下设置react native。 与IOS相同。 因此，我在没有Android Studio的情况下进行了该设置。

I’m using a mac (OS: Catalina), so this article will explain how to set up react native android/IOS in a mac environment.

我使用的是Mac(操作系统：Catalina)，因此本文将介绍如何在Mac环境中设置react native android / IOS。

先决条件： (Prerequisite:)

• Nodejs

  Nodejs

• react-native-cli

  React本机

• Homebrew

  家酿

• Android phone (Creating Android Virtual Device is not discussed in this article)
  Android手机(本文未讨论创建Android虚拟设备)
• genymotion (if you don't have android phone on hand)
  genymotion(如果您手边没有android手机)

遵循此步骤 (Follow this Steps)

STEP 1: Install Java JDK 8 (specific version 8 only)

步骤1：安装Java JDK 8(仅特定版本8)

Install java via these commands

通过这些命令安装Java

brew tap adoptopenjdk/openjdk
brew cask install adoptopenjdk8

Existing users of Homebrew may encounter Error: Cask adoptopenjdk8 exists in multiple taps due to prior workarounds with different instructions. This can be solved by fully specifying the location with brew cask install adoptopenjdk/openjdk/adoptopenjdk8.

现有的Homebrew用户可能会遇到Error: Cask adoptopenjdk8 exists in multiple taps由于先前使用不同指令的解决方法，因此Error: Cask adoptopenjdk8 exists in multiple taps 。 这可以通过使用brew cask install adoptopenjdk/openjdk/adoptopenjdk8完全指定位置来解决。

verify your installation via this command.

通过此命令验证安装。

Verifying installation

验证安装

After this setup java environment on your machine

在您的机器上设置Java环境之后

Check if /usr/libexec/java_home exists. If it does then try running

检查/ usr / libexec / java_home是否存在。 如果有，请尝试运行

export JAVA_HOME=`/usr/libexec/java_home`

and rerunning your Gradle build. If it works then make it permanent with

并重新运行您的Gradle构建。 如果可行，请永久使用

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

STEP 2. Download and install Android SDK.

步骤2.下载并安装Android SDK。

Before you install android SDK you need to add your Android SDK path to .bashrc or .zshrc, this path will be used during installation.

在安装android SDK之前，您需要将Android SDK路径添加到.bashrc或.zshrc，此路径将在安装过程中使用。

export ANDROID_HOME=/usr/local/share/android-sdk

Install android SDK by typing the code below in your terminal

通过在终端中键入以下代码来安装android SDK

brew cask install android-sdk

this operation will take some time (depending on your internet connection, please be patient) because it’s downloading the whole SDK.

此操作将花费一些时间(取决于您的Internet连接，请耐心等待)，因为它正在下载整个SDK。

STEP 3. Install the required SDK

步骤3.安装所需的SDK

React native require android 6.0 (Marshmallow) and above to work with

React Native需要android 6.0(Marshmallow)及更高版本才能使用

• Android 6.0 (Marshmallow) SDK (platform 23)
  Android 6.0(棉花糖)SDK(平台23)
• Android build tool 23.0.1
  Android构建工具23.0.1
• Google APIS
  Google APIS

Install those required packages via terminal

通过终端安装那些必需的软件包

sdkmanager "platforms;android-23" "build-tools;23.0.1" "add-ons;addon-google_apis-google-23"

STEP 4: Create react native app

步骤4：建立React Native应用程式

Create a demo project

创建一个演示项目

react-native init DemoApp
cd DemoApp

You can run a demo project on your android phone or alternatively in an android emulator using genymotion

您可以使用genymotion在Android手机或Android模拟器中运行演示项目

在Andrid手机上运行 (Run on Andrid phone)

Plugin android phone (don’t forget to enable USB debugging)

插入Android手机(别忘了启用USB调试)

before that, you might need a watchman. so if you install via homebrew it will ask you to download Xcode for sure. without that, it won’t install. so as an alternative you can follow these steps.

在此之前，您可能需要一名值班员 。 因此，如果您通过自制软件安装，它将肯定会要求您下载Xcode。 没有它，它将无法安装。 因此，您可以按照以下步骤操作。

• Download and extract the release for your system from the latest release

  从最新版本下载并解压缩适用于您系统的版本

• It will be named something like watchman vYYYY.MM.DD.00-macos.zip
  它将被命名为watchman vYYYY.MM.DD.00-macos.zip

unzip watchman-*-macos.zip
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman

you might need to verify this app from the mac system setting because it’s not verified from the identified developer. then do,

您可能需要从mac系统设置中验证此应用 ，因为未从确定的开发人员中验证该应用 。 然后做，

react-native start

P.S. You can also try react-native run android. The react-native run-android command might be optional if you do not want to deploy the android native code again (for instance, if you have not made any changes). You will have to launch the application manually and it will try to connect to the packager that starts with react-native start.

PS您也可以尝试react-native运行android。 如果您不想再次部署android本机代码(例如，如果未进行任何更改)，则react-native run-android命令可能是可选的。 您将必须手动启动该应用程序，并且它将尝试连接到以react-native start.开头的打包程序react-native start.

It will take a while, it downloads gradle and other java dependencies for the first time. If the installation successful you will see the app show up on your phone.

这将需要一段时间，它将首次下载gradle和其他Java依赖项。 如果安装成功，您将在手机上看到该应用程序。

运行genymotion (Run on genymotion)

1. install genymotion if you haven’t
   如果没有安装genymotion

brew cask install genymotion

2. Set custom android SDK on genymotion Setting → ADB, set value to :

2.在genymotion 设置→ADB上设置自定义android SDK，将值设置为：

/usr/local/share/android-sdk

3. Add new virtual device then run it

3.添加新的虚拟设备，然后运行它

4. run react-native android command on your terminal, react native app will appear on your genymotion emulator

4.在终端上运行react-native android命令，react本地应用程序将出现在您的genymotion模拟器上

react-native android

Sample app.

示例应用程序。

在IOS设备上运行 (Run on IOS Device)

To run on IOS device you can follow this steps.

要在IOS设备上运行，您可以按照以下步骤操作。

npm install -g ios-deploy
# Run on a connected device, e.g. Max's iPhone:
react-native run-ios --device "Max's iPhone"

If you try to run run-ios, you will see that the script recommends to do npm install -g ios-deploy when it reach install step after building.

如果尝试运行run-ios ，您将在构建后到达安装步骤时看到该脚本建议执行npm install -g ios-deploy 。

or

要么

react-native run-ios --device

While the documentation on the various commands that react-native offers are a little sketchy, it is worth going to react-native/local-cli. There, you can see all the commands available and the code that they run — you can thus work out what switches are available for undocumented commands.

尽管react-native提供的各种命令的文档有些粗略，但是值得去react-native / local-cli 。 在这里，您可以看到所有可用命令以及它们运行的​​代码，因此可以算出哪些开关适用于未记录的命令。

Thanks for reading, give some ❤️ if you like this article.

感谢您的阅读，如果您喜欢这篇文章，请给我一个❤️。

Stay Safe and Hunt Hard ❤️

保持安全并努力狩猎❤️

翻译自: https://medium.com/swlh/react-native-complete-setup-without-an-android-studio-xcode-97b6f25624a0