Game environment configuration: react native development environment configuration for Android

Time:2021-8-2

React native is an open source project of Facebook. Facebook hopes to write native app by writing web app. It allows us to develop applications with JS and react. With react native, we can take all Android, IOS and the web. We can create our applications with only a copy of business logic code.

origin
React native is derived from react, which originated from Facebook’s internal project. Because Facebook was not satisfied with all JavaScript MVC frameworks on the market, it decided to write one for its own website. After making it, I found that this set of things is very good and easy to use. It was opened in May 2013.

The derived react native project hopes to write native app by writing web app. In this way, the same group of people only need to write the UI once and can run on the server, browser and mobile phone at the same time. The first Facebook release about react native is for IOS, and react native for Android was released open source on September 15, 2015 last year. At this stage, although the experience of react native is very good, it can only be said that it is very close to the native application, but it still can not reach the experience of native app. So it’s very popular. We’ll talk about the future, but it’s very popular now. There are many technologies and ways. We should learn, too.

Environment construction
Because I use a MacBook, the environment is built according to the Mac computer, but rest assured that I will share an article or video for the environment of Windows computer, and I won’t forget you.

Homebrew installation
Homebrew is a free and open source software package management system to simplify the software installation process on Mac OS X system. Homebrew is written in Ruby language and is aimed at the ruby version of Mac OS X operating system. It is installed in / usr / local by default and consists of a core git version library to enable users to update homebrew. Is an indispensable suite manager for OS X.
Before installing, you can check whether homebrew is installed on the computer. The check method is as follows:
Execute the following commands at the terminal:

brew -v
If it is already installed, the version number is displayed as shown in the figure below.
picture
If it is not installed, you can install it in the following way, and directly enter the following command on the terminal:

ruby -e “$(curl -fsSL https://raw.githubusercontent…
Installation of node.js
Node.js ® Is a JavaScript runtime based on the chrome V8 engine. Node.js uses an efficient, lightweight event driven, non blocking I / O model. Node.js ecosystem is currently the largest open source package management system. We all know that react native needs to be developed using JS, so node.js is an essential installation.

It is also easy to install node.js, as follows:

nvm install node && nvm alias default node
You may find that the command used on the terminal terminal is NVM. If you do not install NVM, you will be prompted with command not found, so we have to install NVM first.
NVM is the version manager of node.js. You can easily install various versions of node.js. The installation method is as follows:
We can install via homebrew:

brew install nvm
Or it can be installed here. Address:https://wwwsangpi.com

After installing NVM, we’d better configure the environment variable to. Bash_ Profile file, because if it is not configured, it is prone to this error NVM command not found.
The configuration method is as follows:

export NVM_DIR=”/Users/loonggg/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && . “$NVM_DIR/nvm.sh” # This loads nvm
Check whether node and NVM are installed. We can do the following:

bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3
Install watchman and flow
Watchman is an open source project of Facebook. It is used to monitor files and record file changes. When files change, it can trigger some operations, such as executing some commands and so on.

Flow is a JavaScript static type checker. Flow adds static type checking to JavaScript to improve development efficiency and code quality.

The installation method is as follows:

brew install watchman
brew install flow
Install react native
We use NPM for installation, as follows:

npm install -g react-native-cli
After installing react native, in order to run or initialize a project and then run it to the simulator or real machine, we need to build an Android or IOS development environment. I only introduce Android here. I believe that students who want to learn react native basically have an Android game development environment on their computers. However, there may be a pit. Www.sangpi.com has a big pit, which is to configure the SDK environment variable: Android_ HOME。

SDK environment variable configuration
Start terminal tool

Enter Cd ~ / to enter the home directory of the current user

establish:

touch .bash_profile
Open and edit:

open .bash_profile
Write the following to the file: export path = ${path}: / users / loonggg / application / Android SDK Mac_ x86/tools:/Users/loonggg/Application/android-sdk-mac_ x86/platform-tools
Friendly tip: please change the above path to the path of SDK on your computer

Execute the following command:

source .bash_profile
Verify: enter ADB enter. If command not found is not displayed, it indicates that the command is valid, and the environment is on, and the setting is completed.

Create our first react native app
Initialize project

react-native init AwesomeProject
The name of awesomeproject above can be defined and named by yourself without restrictions.

Run project
Switch to the home directory of awesomeproject

Run project command

react-native run-android
We use the editor to open and modify the index.android.js file, call up the simulator menu key, and select reload JS to see the changes.
After startup, the simulator rendering:

picture
Here we have finished the environmental configuration. I will send you information or video on the installation on windows. In the official account dialog box, reply the key word: “RN environment configuration” to get the Windows version of the environmental configuration.

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]