REACT-NATIVE新手指南

布满荆棘的人生 2022-05-19 08:19 356阅读 0赞

## 开始战斗 ##

从react到react native, 已经走过许多时间。react native是一个高性能的用javascript开发app的框架。  
正好准备学一点react，然后觉得不如直接学习react-native，就开始了react-native之路，从环境搭建到一个小DEMO，花了不少时间，主要是下载太麻烦

### 准备工作 ###

1.  ide: 我选择idea，习惯了
2.  电脑：win7的i5渣配置，所以先不打算进行ios开发
3.  没有vpn，宽带是交话费送的10M联通宽带，网速还行1m/s
4.  推荐给电脑安装**[wox][]和everything(wox插件就有)**，方便寻找文件

## 环境搭建 ##

### node环境 ###

1.  下载安装**nodeJs**（最新的就行），为了防止环境变量有问题，不要修改安装目录
2.  使用 node-v npm -v 看看有没有安装成功
3.  注册淘宝镜像

> npm config set registry https://registry.npm.taobao.org --global
    > npm config set disturl https://npm.taobao.org/dist --global

*  1
 *  2

1.  下载**yarn**，react-native默认使用yarn下载

> npm i -g yarn
      > yarn -v

*  1
 *  2

1.  给**yarn**注册淘宝镜像

> yarn config set registry https://registry.npm.taobao.org --global
    > yarn config set disturl https://npm.taobao.org/dist --global

*  1
 *  2

### react-native安装 ###

1.  使用yarn下载react-native-cli

> yarn global add react-native-cli
    > react-native --version

*  1
 *  2

1.  创建项目,一直等待下载完成，生成的目录还是很清晰的

> yarn-native init rnDemo

*  1

![react-目录图][react-]

1.  试着运行项目

> cd rnDemo
    > npm start

*  1
 *  2

命令行显示，8081端口开启服务。在浏览器输入localhost:8081,显示`React Native packager is running.`，说明服务还是通畅的。可咱们要做安卓项目！所以继续使用命令行

> react-native run-android

*  1

不出意外会挺慢，因为要下载gradle（gradle是安卓项目常用的构建工具，用来管理jar包和执行任务）和jar包，命令行会提示在此url下载文件`Download https://jcenter.bintray.com/com/android/tools/annotations/25.2.3/annotations-25.2.3.jar`  
4. 因为网络的问题，所以给gradle配置阿里云maven（java常用的包管理工具，有一个下载的仓库，但很慢）镜像。进入**.gradle**文件夹，一般在`C:\Users\Administrator\.gradle`，使用wox就简单多了  
![wox使用图][wox 1]

在 **.gradle** 文件夹里面新建 **init.gradle** 文件，并写入下面代码，或[点击下载init.gradle][init.gradle]

allprojects{
        repositories {
            def REPOSITORY_URL = 'http://maven.aliyun.com/nexus/content/groups/public/'
            all { ArtifactRepository repo ->
                if(repo instanceof MavenArtifactRepository){
                    def url = repo.url.toString()
                    if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('https://jcenter.bintray.com/')) {
                        project.logger.lifecycle "Repository ${repo.url} replaced by $REPOSITORY_URL."
                        remove repo
                    }
                }
            }
            maven {
                url REPOSITORY_URL
            }
        }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17

1.  继续运行命令`react-native run-android`

> react-native run-android

*  1

可以看到下载速度快了好多，但最后会发现报错`SDK location not found`，这是因为没有安装 **android sdk** ，接下来配置 **android环境**

### android开发环境配置 ###

1.  安装java环境，搜一下有N多教程
2.  下载**android studio** 没有翻墙的话推荐使用[网盘下载][Link 1]
3.  安装**android studio** 推荐使用默认安装一直点击`next`
4.  第一次启动会进入下面界面  
    ![androids][]
    
     *  standard 标准配置，推荐第一次安装使用能够
     *  custom 选择安装， 可以自己定制安装选项  
        由于是第一此安装就直接选用默认的**standard**安装，但是react-native官网推荐custom
5.  记得勾选**Android Virtual Device**，一直**next**，最后点击**finished**等待下载完成  
    ![avd][]

### 环境变量 ###

在电脑环境变量设置里面，点击新建，ANDROID\_HOME sdk路径  
![ANDROID\_HOME][ANDROID_HOME]  
然后再到环境变量 **path** 里面添加类似这样  
`C:\Users\Administrator\AppData\Local\Android\Sdk\tools`  
`C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools`  
一定注意路径的正确性  
![tools][]

### 再次运行 ###

1.  运行`react-native run-android`

> react-native run-android

*  1

又提示报错关于 `[Android SDK Platform 23, Android SDK Build-Tools 23.0.1].`， 这是由于少了build-tools 23.0.1, 在sdk manager里面安装就行了  
![snap3555][tools]  
![snap3556][]  
点击**finished**

1.  运行`react-native run-android`

> react-native run-android

*  1

提示报错`com.android.builder.testing.api.DeviceException: No connected devices!`, 由于没连上设备导致的错误

### 连接设备 ###

adb（连接devices的驱动）可以通过模拟器和真机进行，android studio带的模拟器不怎么好用，所以我选择用强大的**genymotion**进行开发

下载genymotion免费版并启动

1.  下载并安装[genymotion免费版][genymotion],替换安装目录文件就免费了
2.  由于**genymotion**依赖virtualbox，下载安装[virtualbox][]就行了
3.  以上安装好之后打开**genymotion**，根据提示添加一个设备并运行该安卓模拟器  
    ![gen][]
4.  安装完毕，选择一个添加好的虚拟机，并启动。 糟糕，不知什么原因报错了。  
    ![err][]  
    `碰到这种报错不用怕，打开virtualBox，直接启动安装好的虚拟机。`  
    ![verr][]  
    `可以看出来是virtualBox的配置有错误，那就打开配置信息`  
    ![configerr][]  
    `跟随黄色提示配置好virtualBox,继续启动在genymotion里面添加的设备，完美!`  
    ![success][]
5.  在genymotion里面配置sdk路径  
    ![sdk][]
6.  如果还是提示连接不上设备，就用adb连接一下

> adb devices
    > adb connect 127.0.0.1
    > adb devices

*  1
 *  2
 *  3

## 开始开发 ##

1.  各种配置都设置好了，继续运行`react-native run-android`
2.  尼玛又是error,这次明显的看出提示没有连接上js Service,得手动连接了  
    ![netErr][]  
    `点击菜单 -> Dev Setting -> Debug server host`  
    ![dev][]  
    ![host][]  
    `然后返回，reload一下`  
    ![reload][]  
    `出现成功界面，可以愉快的开发了`  
    ![devSuccess][]  
    **注意：在菜单里面点击 Enable Hot Reloading，这样就可以保存后实时刷新了**

### 正式开发，就写一个简单的底部导航路由 ###

用到底部导航package [react-native-tab-navigator][]

> yarn add react-native-tab-navigator

*  1

修改`index.android.js`,给入口少搁点东西，不然看着恶心

import React, { Component } from 'react';
    import {
      AppRegistry
    } from 'react-native';
    
    import RootApp from './app/RootApp'
    
    AppRegistry.registerComponent('rnDemo', () => RootApp); // rnDemo是项目的名称

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

在根目录新建文件夹app，在app里面新建 RootApp.js、components/Home.js、components/Nice.js

app/RootApp.js

import React, {Component} from 'react'
    import {
      View,
      StyleSheet
    } from 'react-native'
    import TabNavigator from 'react-native-tab-navigator'
    import Home from './components/Home'
    import Nice from './components/Nice'
    import TabNavigatorItem from "react-native-tab-navigator/TabNavigatorItem";
    
    export default class RootApp extends Component {
      constructor(props) {
        super(props)
        this.state = {
          selectedTab: 'home'
        }
      }
    
      render() {
        return (
          <View style={styles.container}>
            <TabNavigator>
              <TabNavigatorItem
                title="Home"
                onPress={() => this.setState({selectedTab: 'home'})}
                selected={this.state.selectedTab === 'home'}>
                <Home/>
              </TabNavigatorItem>
              <TabNavigatorItem
                title="Nice"
                onPress={() => this.setState({selectedTab: 'nice'})}
                selected={this.state.selectedTab === 'nice'}>
                <Nice/>
              </TabNavigatorItem>
            </TabNavigator>
          </View>
        )
      }
    }
    
    let styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#ccc'
      }
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46

app/components/Home.js

import React, {Component} from 'react'
    import {
      Text
    } from 'react-native'
    
    export default class Home extends Component {
      render() {
        return (
          <Text>
            我是Home
          </Text>
        )
      }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

app/components/Nice.js

import React, {Component} from 'react'
    import {
      Text
    } from 'react-native'
    
    export default class Nice extends Component {
      render() {
        return (
          <Text>
            我是Nice
          </Text>
        )
      }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

大功告成  
![bigSuccess][]

转自：[https://blog.csdn.net/qq\_27254949/article/details/78395651][https_blog.csdn.net_qq_27254949_article_details_78395651]

[wox]: http://www.getwox.com/
[react-]: /images/20220519/3de04a8c8c924e319405f471588e4344.png
[wox 1]: /images/20220519/6ec41694356e4654a5e0645350220389.png
[init.gradle]: http://faceplus.top/2017/04/22/react-native%E8%BF%9B%E5%85%A5%E5%A7%BF%E5%8A%BF/init.gradle
[Link 1]: https://pan.baidu.com/s/1jIyKHjK
[androids]: /images/20220519/f28375d1fb6e4fc0a614481531f2d9b2.png
[avd]: /images/20220519/9f5a195d44ed4c5abd816b66418bc523.png
[ANDROID_HOME]: /images/20220519/80e8516736e44e93918ed96eb0b9ae4a.png
[tools]: /images/20220519/78d3cca319024ffa87df1667c1a7715c.png
[snap3556]: /images/20220519/202d1cb1740a444a84e7c0b00b0fbe69.png
[genymotion]: https://pan.baidu.com/share/link?shareid=3943454172&uk=3073382768#list/path=%2F
[virtualbox]: https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=virtualbox&oq=genymotion%25E7%25A0%25B4%25E8%25A7%25A3%25E7%2589%2588&rsv_pq=e656eb5a0011ec27&rsv_t=715efDZI0lJ%2B1tsmUpCuiiAat7RfExGnvVtlkSWbKVbC%2BS9zwTu7ku7rueA&rqlang=cn&rsv_enter=1&inputT=1128&rsv_sug3=8&rsv_sug1=8&rsv_sug7=100&bs=genymotion%E7%A0%B4%E8%A7%A3%E7%89%88
[gen]: /images/20220519/0cdbdd9b8a6a40a984d579948533045a.png
[err]: /images/20220519/bcdbdd01190744dc8f06278ad19f3da1.png
[verr]: /images/20220519/430f943bc2c54e8a9e9b520d7a60917c.png
[configerr]: /images/20220519/dbdf69b4806d478da809ac30f21b3ec0.png
[success]: /images/20220519/2d0a2d049d604b5c9125e1fe6487cccc.png
[sdk]: /images/20220519/4c9acc0ac965458bb96fc75b00342f9a.png
[netErr]: /images/20220519/e994ce0893624f2a8792905097ec9ae1.png
[dev]: /images/20220519/aa28abfb11bf4d9f9b778b9de0eafddd.png
[host]: /images/20220519/a48fd92f05a54803ae931938bd8cea94.png
[reload]: /images/20220519/8af50640ec504d3d8def9fd80e0054c4.png
[devSuccess]: /images/20220519/ed87a28f6e0841f0ac51e698bd7cef3f.png
[react-native-tab-navigator]: https://github.com/expo/react-native-tab-navigator
[bigSuccess]: /images/20220519/5af552d70538463cba4551b654945bf7.png
[https_blog.csdn.net_qq_27254949_article_details_78395651]: https://blog.csdn.net/qq_27254949/article/details/78395651