reactnative安装

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工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，导致无法安装的情况

开始一个项目

1. 创建新项目

    react-native init myRN

1. 编译并运行

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

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

1. 调试与热更新

摇一摇手机（或在命令行运行：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

1. 安装react-native-elements

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

1. 安装react-native-vector-icons

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

1. 关联原生库

    react-native link react-native-vector-icons

1. 使用

    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

  1. 生成一个签名密钥

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

  1. 设置 gradle 变量

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

  3. 打包

      # 进入android目录
      ./gradlew assembleRelease

安装一下步骤：

　　android-studio-ide-183.5522156-windows.exe

　　python-2.7.16.amd64.msi

　　jdk8x64

　　环境安装；

　　开始创建一个项目