React Native

介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是React 在原生移动应用平台的衍生产物，使用JS、JSX、CSS开发原生应用，目前支持iOS和安卓两大平台。

官网地址：https://reactnative.cn/docs/getting-started.html

环境安装

以windows+Android平台来安装React Native环境

Nodejs

Node 的版本必须大于等于 v10.x

React Native命令行工具

全局安装react-native-cli

    npm install -g react-native-cli

python

Python 的版本必须为 2.x（不支持 3.x）

JDK（Java SE Development Kit ）

JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）

Android Studio

安装 Android Studio 来获得编译 Android 应用所需的工具和环境

安装 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 所必须的版本）

配置环境变量

设置ANDROID_HOME系统变量到c:\Users\你的用户名\AppData\Local\Android\Sdk

设置%ANDROID_HOME%\platform-tools到path

PS：安装以上工具尽量使用稳定的FQ工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，导致无法安装的情况

开始一个项目

创建新项目

    react-native init myRN

编译并运行

注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟 需打开USB调试及允许安装未知方源

    # 以下命令检测设备连接状态（包括模拟器）
    # adb devices
​
    # android
    react-native run-android
​
    # iOS
    react-native run-ios

调试与热更新

摇一摇手机（或在命令行运行：adb shell input keyevent 82），打开Enable Hot Reloading 或 Enable Live Reload

使用

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件

内置组件

详情请查看官网 https://facebook.github.io/react-native/

API

详情请查看官网 https://facebook.github.io/react-native/

ReactNative UI框架

react-native-elements

安装react-native-elements

    # yarn
    yarn add react-native-elements
​
    # npm
    npm i react-native-elements --save

安装react-native-vector-icons

    yarn add react-native-vector-icons
​
    # npm
    npm i --save react-native-vector-icon

关联原生库

    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中如无法看到小图标，需要在android/app/build.gradle中添加字体图标apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

打包

android APK

生成一个签名密钥

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

设置 gradle 变量

把签名配置加入到项目的 gradle 配置中

打包

    # 进入android目录
    ./gradlew assembleRelease

安装一下步骤：

　　android-studio-ide-183.5522156-windows.exe

　　python-2.7.16.amd64.msi

　　jdk8x64

　　环境安装；

　　开始创建一个项目

　　　　

reactnative安装的相关教程结束。