之前学习了react,一直没有入手react-native 但是心理却一直在惦记着,终于今天抽了半天的时间来吧react-native的环境给搭建好
https://reactnative.cn/ // react-native中文网网址
其实react环境还是好搭建的 问题是 下载东西很多都是要从国外的服务器进行下载,一直在下载哪里卡了半天
最后还是用 npx 临时的网络资源下载成的
下面要讲的是 window环境下的 react-native的安装 Mc的童鞋要去网上自己查了
window上的只能开发 andorid 版本的app
先看一下官网的俩个小介绍
1.React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          如果你喜欢在Web上使用React，那你也肯定会喜欢React Native.
        </Text>
        <Text>
          基本上就是用原生组件比如'View'和'Text'
          来代替web组件'div'和'span'。
        </Text>
      </View>
    );
  }
}

2.React Native应用是真正的移动应用
React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image
          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
          style={{width: 320, height:180}}
        />
        <Text>
          在iOS上，React Native的ScrollView组件封装的是原生的UIScrollView。
          在Android上，封装的则是原生的ScrollView。

          在iOS上，React Native的Image组件封装的是原生的UIImageView。
          在Android上，封装的则是原生的ImageView。

          React Native封装了这些基础的原生组件，使你在得到媲美原生应用性能的同时，还能受益于React优雅的架构设计。 
        </Text>
      </ScrollView>
    );
  }
}

3.好了废话可能有点多了 现在开始正题了 开始环境的搭建
安装依赖
必须安装的依赖有：Node、Python2、JDK 和 Android Studio SDK。
我们一一开始讲解 先从简单的来说哈
3.1.node.js
查看版本: 要求在 10 ~ 12.10 之间 node -v
// 这里直接附上下载地址
https://nodejs.org/download/release/v12.10.0/node-v12.10.0-x64.msi
node.js 安装直接下一步 傻瓜式安装就成 ( 注意路径不要乱动哈,就默认路径)
查看安装是否成功还是 打开命令行 node -v进行查看
3.2.Python2 我也直接附上下载地址
https://www.python.org/ftp/python/2.7.17/python-2.7.17.amd64.msi

安装成功之后 c盘下有一个python的文件夹

下面还需要一步就是配置环境变量 将python 放置到环境变量中
将python的安装路径 放到环境变量中 和我下面的那种方式

环境变量打开方式 我的电脑=》鼠标右键 属性 =>高级 就看见环境变量那个按钮了

添加完之后,记得点击确定哦,在命令行输入 python 出来这个就表示正确

3.jdk 玩过java的安装这个肯定也没问题 jdk 必须得是 java8版本
http://xzd.197946.com/jdk8u202x64.zip // 还是老样子 附上 下载地址
双击安装 下一步下一步即可
安装完成之后
在命令行中输入 java -servison 表示安装成功

4.最后建议安装一个手机模拟器,当然你也可以真机测试但是各个版本的各个厂商生产的手机各不相同建议安装模拟器哈
这里我使用的是 夜神模拟器 我也附上夜神模拟器的下载地址
https://www.yeshen.com/cn/download/fullPackage
5.最后的是一个安卓的sdk 这个后面我也会附上资源 可以直接拿来使用的
我先讲解下 环境的搭配
把压缩包ANDROID_SDK.zip解压缩到D盘下 我是解压的D盘里面了

还是老样子就是 环境变量的配置 把我给你解压之后的文件路径放到环境变量中

从d盘中D:\ANDROID_SDK\platform-tools 文件路径也添加到环境变量中

6.夜神模拟器的配置

拷贝到夜神模拟器的安装文件中 把当前的文件 exe文件给覆盖掉
覆盖前最好把夜神模拟器关闭了
找程序的安装文件(鼠标右键点击桌面图标 打开文件所在位置就找到了)

7.安装 react-native 的脚手架
能用npm 安装最好 最好建议是在网络比较好的情况下尝试
这里不建议使用 cnpm 安装 当然是在没办法 也可以吧
npm config set registry https://registry.npm.taobao.org //这里附上 调整淘宝镜像
你也可以使用yarn 安装 我这这里卡死了很久了
npm install react-native -g //全局安装
react-native --version // 查看版本
// 使用脚手架创建项目
react-native init 项目名 例如 : react-native init myApp 之间不要有横线
这里网络不好的情况下 就好好 等待着下载哈
8. 编译你的项目到 模拟器上 (前提是项目下载成功了哈)
首先打开你的模拟器
在命令行中输入 adb devices

连接上设备 一般是下面的这个地址 也有可能不是这个 不同的设备可能不同
adb connect 127.0.0.1:62001
9.最后 也是很重要的一步 测试
打开你安装的项目 ( 之前 react-native init myApp)
cd myApp
第一次编译 npm run android
运行过程需要下载大概200M的内容,网速不行要等很久
慢慢等待 网络不好真的要很长时间的

最后在你的模拟器上看到这个页面表示安装成功了
我也是搞了块俩个小时才成功的
然后算是正式入了,react-native的坑了
好了祝同学们安装成功!

// 附上所有的安装资源 (夜神模拟器 官网可以自己下载的哈，我就不带上了)
链接：https://pan.baidu.com/s/1mgNRs0-BDt69Xn9tbIRohA
提取码：cq0k
复制这段内容后打开百度网盘手机App，操作更方便哦