I almost finished a React Native project from install to package

Since I am not familiar with mobile terminal development, I choose React Native. After all, any application that can be implemented using JavaScript will eventually be implemented using JavaScript 😄. Since I do not have a Mac developer account, I only pack Android

Installation environment

The complexities of the React Native installation environment can make you give up before you even get started

Environment installation must follow the official document process step by step, remember! Remember that! Remember that!

The Windows platform

If we use Windows as the development environment, we can only develop Android apps. Necessary dependencies:

NodeV12 or later is required
JDKThe version must be 1.8 or 8
Android Studio

The Android environment

downloadAndroid StudioConfirm that the following items are selected:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
Android SDK: SDK Manager can be found in the welcome screen, install Android 9 (PIE)

Before using the environment installation must be in accordance with the official document, otherwise there will be a variety of exceptions will make people directly want to give up using, installation environment mainly pay attention to Android Studio installation.

MacOS platform

If we develop on MAC, we can develop both IOS and Android apps.

IOS environment

Necessary dependencies:

NodeV12 or later is required
watchmanIs a tool provided by Facebook to monitor file system changes. Installing this tool can improve development-time performance (Packager can quickly catch changes to files for real-time refreshes)
XcodeYou can find direct download on the App Store
CocoaPods

Note:

cocoapodsInstallation may require turning over the wall, if there is no wall to turn over, need to try more, or inTry again when the night is quietNot yet yesDirect to your own cellular networkTry again. If that doesn’t work, tryThe method of this article
Execution may be required when the project is first runpod install

Go to the ios directory and run Pod Install to throw an exception

This is also because the dependent packet needs to climb over the wall, resulting in network exceptions. It may be thrown after trying to use the mobile network

After executing sudo xcode-select –switch /Applications/ xcode. app in the project, execute pod Install again

The above installation is recommended to use the mobile network, if the download is abnormal, try several times, try several times, try several times, until the installation is successful

Hello World

Once we have installed the above set of environments, if all goes well, we can prepare the initial project and run a Hello World. We need to open the Android emulator before running the project

Run the project

npx create-react-native-app rn-project

cd rn-project

yarn android
Copy the code

If everything goes well, a CMD box will pop up. This project cannot be closed when running. It is a Node listening service.An interface appears on the emulator

Congratulations, you’re halfway through your long march!

Exception handling

Abnormal JAVA_HOME

An exception was thrown when the command was compiledWe need to find the JRE directory under the Android Studio installation directory

Set the system variable JAVA_HOME

Two records must be added to the corresponding PATH

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin
Copy the code

Reopen CMDThe successful running

Abnormal app: installDebug

An exception is thrown 在 androidView in directorylocal.propertiesFile, not own a new one, specifiedandroid sdkThe installation directory

sdk.dir=E\:\\androidsdk
Copy the code

Text strings must be rendered within a component

Comments in lines of code are removed
The Text component needs to determine the value, not an empty string

{province ? <Text className="province">{province}</Text> : null}
Copy the code

How to debug

The development platform used here is the Window environment

Third party simulator

React Native debugging is availableAndroid StudioBuilt-in simulator

Third-party emulators can also be used; The lightning simulator is used here

Open emulator debug mode: Apply Settings -> About Tablet -> Click version number 5 times in a row -> USB Debug
Connection simulator
- win + rThen open thecmd
- The adb connect 127.0.0.1:5555
- Different emulators have different port numbers
Run in the project root directoryyarn android

If adb is not a command, you need to add environment variables. Go to the Platform-tools directory in the Android Studio JDK installation directory

debugging

Click more -> Shake -> Debug

Chrome debugging

All mode can open the address http://localhost:8081/debugger-ui/ to look at it

Real machine commissioning

This refers to Android phones

Need to open the mobile phone USB debugging mode, directly connect the data line to the computer
Project root:yarn android

After the project is successfully started, you will see the program started on your mobile phone. If you need to debug, you need to shake your mobile phone to see the pop-up box

Select Debug to Debug using Chrome

react-native-debugger

The Debugger plugin is very powerful. Use:

Shut down all of the Chrome http://localhost:8081/debugger-ui/ page (RN) default debugger tool)
Download the React-Native Debugger application
Android Studio** ** in the simulatorNexus SBecause the model has a menu key, higher versions of the simulator usually don’t.
Use shortcut keysCtrl+MYou can also open the menu bar.

Cross domain processing

After looking up more than half of the data, it is recommended to use Nginx to do reverse proxy processing

The animation library

React Native doesn’t support CSS3 animations, so we used its built-in Animated library for animations

Type values

Provides two types of values that can be bound to styles and other properties

Animated.Value() for a single Value
Animated.ValueXY() for vector values

Configuration of the animation

Animated offers three animation types. Each animation type provides a specific function curve that controls how the animation value changes from the initial value to the final value:

The initial speed specified by Animated. Decay () starts changing, and then slows down until it stops.
[Animated.spring()](https://reactnative.cn/docs/animated#spring)A basic spring physical model is provided.
Animated. Timing () moves the values over time using easing.

In most cases you should use Timing (). By default, it uses a symmetric easeInOut curve that gradually accelerates the object to full speed and then stops by gradually slowing down.

Use animation

Start animation by calling the start() function.

startA function can pass in a callback function that notifies the caller when the animation is complete
Normal operation complete, callback value{ finished: true }
callstopFunction ends, callback value{ finished: false }

Custom animation components

You can animate any React component by encapsulating it with createAnimatedComponent

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

Loading animation

Implementation effect

Go straight to code

import React, {useRef, useEffect} from 'react';
import {View, StyleSheet, Animated, Easing} from 'react-native';

const Loading = () = > {
  let spinAnim = useRef(new Animated.Value(0));

  const loadingAnim = () = > {
    Animated.timing(spinAnim.current, {
      toValue: 1.duration: 1500.easing: Easing.linear,
      useNativeDriver: true,
    }).start(({finished}) = > {
      if (finished) {
        spinAnim.current.setValue(0); loadingAnim(); }}); }; useEffect(() = > {
    loadingAnim();
  });

  // Map 0-1 values to 0-360 degrees
  const spin = spinAnim.current.interpolate({
    inputRange: [0.1]./ / input value
    outputRange: ['0deg'.'360deg']./ / the output value
  });

  return (
    <View style={Styles.loading}>
      <View style={Styles.loader}>
        <Animated.View
          style={[
            Styles.loaderBall,
            {
              transform: [{rotate: spin}],},]} >
          <View style={Styles.loaderBallHook} />
        </Animated.View>
      </View>
    </View>
  );
};

const Styles = StyleSheet.create({
  loading: {
    width: '100%'.height: '70%'.display: 'flex'.justifyContent: 'center'.alignItems: 'center',},loader: {
    display: 'flex'.justifyContent: 'center'.alignItems: 'center'.height: 35.width: 35.borderRadius: 35.backgroundColor: '#FE9727',},loaderBall: {
    position: 'relative'.height: 30.width: 30.borderRadius: 30.// animation: spin 2s ease infinite,
  },
  loaderBallHook: {
    position: 'absolute'.zIndex: 1.left: 5.top: 5.height: 7.width: 7.backgroundColor: '#fff'.borderRadius: 7,}});export default Loading;
Copy the code

Packaging releases

Packaging APK

Android packaging refer to the official website process

Generating a Signing Certificate

Android Studio to generate

It can be generated according to Google Docs. Sync Project with Gradle Files: Generate signed APK

You can then see Generate signed APk in the Build TAB

Command to generate

In addition to automatically generating certificates using Android Studio, you can also execute commands to generate certificates

keytool -genkey -v -keystore myApp.keystore -alias myApp.keystore -keyalg RSA -validity 30000
Copy the code

Parameter meaning

parameter	meaning
keytool	Tool name (fixed)
)-genkey	Generating a digital certificate
-v	Print the detailed information about the generated certificate
-keystore myApp.keystore	The generated certificate file is called “myapp. keystore”(set your certificate title as required)
alias myApp.keystore	The alias of the certificate is “myapp.keystore”.
(Usually the same as the file name above, can be different, but remember, the signature will use (A))
-keyalg RSA	RSA is used to generate key files.
-validity 3000	The validity period of the digital certificate is 30,000 days, after which the certificate becomes invalid

Follow the instructions step by stepFinally, a key certificate is generated

Set the gradle variable

Copy the generated certificate to the project/android/app/directory
Edit projectgradle.propertiesfile

MYAPP_RELEASE_STORE_FILE=myApp.keystore
MYAPP_RELEASE_KEY_ALIAS=myApp.keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456
Copy the code

Adding signature Configuration

Modify android/app/build. Gradle

signingConfigs { ... release { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { debug { signingConfig signingConfigs.debug } release { signingConfig signingConfigs.release ... }}Copy the code

Changing the Application Name

Modify/android/app/SRC/main/res/values/strings. The XML file

<resources>
    <string name="app_name">The application name</string>
</resources>
Copy the code

Modify application Icon

Replace the ICONS in the following directories with required ICONS. It is recommendedAndroid Studiobuilt-inimage-asset-studiotool

The signature is packaged

Go to the/Android root directory and run./gradlew assembleRelease

After the success can be in/android/app/build/outputs/apk directory to find the apk after packaging

Can be manually installed to android real machine

Exception handling

appearError: Cannot create directory .. \mergeDebugResources\merged.dir\values

Execute the command

cd android
./gradlew clean
cd .. 
yarn android
Copy the code

conclusion

Overall, the development is still very adapt, but the front of the environment installation is really a bit of dissuasion 😄, welcome to download the Android terminal to try

I almost finished a React Native project from install to package

Installation environment

The Windows platform

The Android environment

MacOS platform

IOS environment

Hello World

Run the project

Exception handling

Abnormal JAVA_HOME

Abnormal app: installDebug

Text strings must be rendered within a component

How to debug

Third party simulator

debugging

Chrome debugging

Real machine commissioning

react-native-debugger

Cross domain processing

The animation library

Type values

Configuration of the animation

Use animation

Custom animation components

Loading animation

Packaging releases

Packaging APK

Generating a Signing Certificate

Android Studio to generate

Command to generate

Set the gradle variable

Adding signature Configuration

Changing the Application Name

Modify application Icon

The signature is packaged

Exception handling

conclusion

Related Posts

Flutter a simple Route Helper/Navigator Helper

What you see is what you get! IMove performs code exploration online

How does addition work at the bottom of a computer?