Setting up an environment for react-native development on Ubuntu

react-native Development on Ubuntu

1. Building the development environment

Concept Interpretation:

node. JS is a platform built on the Google V8 engine (Chrome JavaScript runtime)

For easy-to-use network applications with fast response times and easy expansion

NVM is the Nodejs version management tool. Can be toggled in multiple NODEJS versions, reducing the cost of upgrading Nodejs

NPM is a NODEJS package management tool that allows you to easily install node-related external libraries

1. Install node

Download the tar.gz package for the LTS version of source code from https://nodejs.org/en/download/

According to Https://github.com/nodejs/node#build

Install the dependencies as shown, and compile and install node.

Upon completion

NODE-V Display the current node version

Npm-v shows the current NPM version

2. Install NVM

Get NVM

git clone https://github.com/creationix/nvm.git

When clone is complete, enter the directory to execute directly./install.sh

After installation, enter NVM if there is no prompt, execute source./nvm.sh

View NVM version NVM--version

View NVM help Nvm-h

View the node or IOJS version installed in the current period via NVM ls

View currently available node or IOJS versions via NVM ls-remote

Install the specified version of Nodejs via NVM install v0.21.7

Install the specified version of Nodejs via NVM uninstall v0.21.7

Switch to Nodejs version using NVM use v0.21.7

3. Installing Watchman

Install dependencies First

sudo apt-get install autoconf automake python-dev Python3-dev

After the successful completion of the dependent environment,

git clone https://github.com/facebook/watchman.git

CD Watchman

git checkout v4.3.0 # The latest stable release Select the latest version

./autogen.sh

./configure

Make

sudo make install

The installation is still relatively smooth

4. Install flow

Complete the flow installation as shown in http://flowtype.org/docs/getting-started.html

Flow version will show the versions of Flow,

For example Flow, a static type checker for JavaScript, version 0.21.0

5. Installing react-native

NPM install-g REACT-NATIVE-CLI

The process will be long, and to ensure that the network unobstructed (scientific Internet)

6. Create a react-native project (project named Demo)

React-native Init Demo

Process takes a long time (see Computer performance and network unobstructed)

7. Run the project

After creating the demo, go to the project directory

React-native-v can display the current version of React-native, as follows:

react-native-cli:0.1.10

react-native:0.19.0

Use react-native start to run the demo project

Keep this window in the process of writing debugging code,

That is, start the server, if the server is not started

Will error react Native:ReferenceError:Can ' t find Variable:require (line 1 in the generated bundle)

The window will display the relevant log information

8. Developing iOS Programs

Open the. Xcodeproj folder in the iOS directory directly with Xcode

9. Developing Android Programs

More trouble than Ios,android.

1. Install the JDK and configure the environment variables

2. Install Android Studio

3. Install the Android SDK

4. Configure environment variables for the SDK

5. Install the Genymotion Simulator (recommended to use the real machine)

Because this is Android under Ubuntu development, consider user rights

To write environment variables in/etc/profile and. bashrc files, respectively

and executes the source. BASHRC Make Environment variables effective

The environment variable is as follows, and the path is modified slightly.

# Set JDK Environment

Export java_home=/usr/lib/jvm/jdk1.8.0_60

Export JRE_HOME=${JAVA_HOME}/JRE

Export Classpath=.:${java_home}/lib:${jre_home}/lib

Export Path=${java_home}/bin: $PATH

#set Android SDK Tools environment

Export android_home=/home/uxstone/android/sdk/

Export path= $PATH: $ANDROID _home/platform-tools/

10. Run the Andorid project

You can use the emulator to use the real machine (note to ensure that the server and Andorid programs running react-native are in the same network environment)

Under the Demo project directory, execute react-native run-android to package and compile the APK.

The normal run screen will show Welcome to React Native Click Menu Jian (real machine can shake) display related Debug button

Here's how to connect the real machine to the server

On the Debug menu in the popup, in the debug server host in dev settings, write the server-side IP address + port, for example 192.168.0.1:8081

Ports are displayed at the beginning of the React Native server

You must not close the server window during encoding debugging (that is, the window of the react-native Start command in step 7th)

Setting up an environment for react-native development on Ubuntu