React Native

Introduction

React Native (referred to as RN) is Facebook in April 2015 open source cross-platform mobile application development framework, are React in a native-derived products for mobile applications platform, using JS, JSX, CSS developing native applications, now supports iOS and Android two platforms .

Official website address: https://reactnative.cn/docs/getting-started.html

Environment Installation

With windows + Android platform to install React Native Environment

Nodejs

Node version must be greater than or equal v10.x

React Native command-line tool

Global Installation react-native-cli

    npm install -g react-native-cli

python

Python must be version 2.x (not supported 3.x)

JDK（Java SE Development Kit ）

JDK version must be 1.8 (currently does not support 1.9 and later)

Android Studio

Android Studio installed to obtain the required application tools and environment to compile Android
- Install Android SDK
  - SDK Manager -> "SDK Platforms" -> "Show Package Details"
    - -> Android SDK Platform 28
    - -> Intel x86 Atom_64 System Image
  - SDK Manager -> "SDK Tools"
    - -> 28.0.3 (React Native necessary version)
- Configuration environment variable
  
  Set ANDROID_HOMEsystem variables toc:\Users\你的用户名\AppData\Local\Android\Sdk
  
  Setting %ANDROID_HOME%\platform-toolsthe path

PS: install more tools to make use of a stable circumvention tools, otherwise download, install, configure the process will continue to experience time-out or disconnect the link, resulting in the situation can not be installed

Starting a project

Create a new project

    react-native init myRN

Compile and run

Build dependencies need to download a lot of attention to the first run, took tens of minutes may need to open and USB调试允许安装未知方源

    # This connection state detecting apparatus (comprising a simulator) # the adb Devices # Android    REACT-Native-Android RUN # the iOS    REACT-RUN-Native iOS

Debugging and hot update

Shake the phone (or on the command line, run: adb shell input keyevent 82), open Enable Hot ReloadingorEnable Live Reload

use

React Native looks like React, but its basic components are native components rather than the web components

Built-in components

For details, see the official website https://facebook.github.io/react-native/

API

For details, see the official website https://facebook.github.io/react-native/

ReactNative UI framework

react-native-elements

installationreact-native-elements

    # yarn
    yarn add react-native-elements

    # npm
    npm i react-native-elements --save

installationreact-native-vector-icons

    yarn add react-native-vector-icons

    # npm
    npm i --save react-native-vector-icon

Native library association

    react-native link react-native-vector-icons

    import {Button,SearchBar} from 'react-native-elements';

    class MyComponent extends Component{
        state = {
            keyword:'',
       }
        changeKeyword=(keyword)=>{
            this.setState({
                keyword
           })
       }
        render(){
            return <View>
                <SearchBar
                    placeholder="Type Here..."
                    onChangeText={this.changeKeyword}
                    value={this.state.keyword}
                />
                <Button title="搜索"></Button>
            </View>
       }
   }

PS: android If you can not see the small icon, you need to android/app/build.gradleadd the font iconapply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Bale

android APK

Generate a signature key

    keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Set variable gradle
The signature is added to the configuration of the project gradle configuration
Bale

    # Into the android directory 
    ./gradlew assembleRelease

Install some steps:

　　android-studio-go-183.5522156-windows.exe

　　python-2.7.16.amd64.msi

　　jdk8x64

　　Environmental installation;

　　Start by creating a project

reactnative installation