React Native 学习之环境搭建

第一步：首先必须要下载的依赖有：

jdk（这不用说了），android sdk，nodejs，react-native-cli,webStorm

网上说要下载Android studio，我是android开发，所以本身android环境没有什么问题，其实在我看来，安装了webstorm后，真正需要的是android sdk，Android studio在其中我都没有用到，所以，见仁见智吧，不过下一个方便一点，因为webstorm有些坑，有个android studio好点；

1.nodejs下载安装:(没啥好说的，网上教程一大堆，并且也不会出现什么坑)

2.react-native-cli:nodejs安装好之后，测试一下，出现如下界面（版本号无所谓，不过版本不要太低），那么第一步就成功了；

安装react native

npm install -g react-native-cli

复制这条命令到cmd中，执行，等待，基本不会有问题

3.webstorm下载安装：

下载地址破解地址（破解最好使用jar包破解，其他的方法我都试过，都失败了）

4.webstorm安装好之后，先配置一下，

（1）配置jsx环境

（2）下载必须的库

最后是这样

大致就配置好了，然后新建项目；

webstorm就会开始构建react项目，稍等一会，如果上述步骤顺利的话，就会看见项目结构目录如下：

到了这一步，如果你平时使用过ide的话，你会发现，右上角，并没有我们期待的运行按钮，也就是这个：

我的已经配好了，所以会出现，现在我们配置一下，其实也很简单；点击出现下图，选择edit

出现如下画面

如果是android开发的话，那么直接点击ok就可以，就会出现和我一样配置好的界面；

到了这一步，我当时很高兴，直接就点击运行了，然后就发现报错，下面的配置都是我一步一步踩坑踩出来的，说起来真的是一把辛酸泪，一步一步来吧；

（1）从android studio构建好的项目中找到

这个文件是配置本地Android sdk和ndk路径的，不过我没有使用到ndk，所以不需要配置，webstorm构建好的项目并没有这个文件，很坑，所以会找不到本地android sdk的路径，也就自然构建不了android项目，所以报错；不过，如果没有装Android studio并且也没有Android项目的兄弟，我把local.propertires文件贴出来，

## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
#Tue Jul 31 16:17:33 CST 2018
sdk.dir=C\:\\Users\\pengganggui\\AppData\\Local\\Android\\Sdk

其实只需要最后一行，并且把路径换成你们本地的androidsdk路径就可以了，复制到android根目录下

（2）其实到了这一步，已经可以了，我第一次是在模拟器中运行的，很成功；我也以为我成功了，但是当我运行在真机中时，就会发现很多问题；很多坑；模拟器我就不说了，接下来说一下在真机中运行的配置；

<1>首先，如果你的手机Android系统时5.0以上的话，那么，你首先需要打开usb调试，并使用usb线连接手机电脑，同时，保证手机和电脑处在同一网段中，然后，在cmd中复制adb reverse tcp:8081 tcp:8081

出现上述画面，那么你的手机就可以调试了；

<2>当我做完上述事情之后，点击运行，没有报错，项目也正常打开了，但是会出现一片红，并且夹杂这一对英文，大致意思就是说服务器500错误，其实，react项目运行时，pc端会运行一个js包管理器，手机端需要通过网络从pc端下载js文件才能正常运行，500错误说明你的网络没有配置好；

<3>我很确定我的网络没有问题，所以当我再次点击reload时，会发现又报另一个错误，大致的意思时index.bundle.js文件不存在，这个问题我找了很久，最后发现居然是tmd我的react版本太高，让我很无语，我把我的package.json文件贴出来

{
  "name": "ThirdReacApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.55.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "^2.1.0",
    "jest": "23.4.2",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

"react-native": "0.55.0"

"babel-preset-react-native": "^2.1.0",

我改了上面两个版本，然后再次运行项目，出现下面的画面，成功；

哦，对了，如果是5.0以下的手机，那么

Android 5.0以下通过Wi-Fi连接你的本地开发服务器

1、首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
在设备上运行你的React Native应用。和打开其它App一样操作。
你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
2、摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
3、点击进入Dev Settings。
4、点击Debug server host for device。
5、输入你电脑的IP地址和端口号（譬如172.30.23.25:8081）。在Mac上，你可以在系统设置/网络里找查询你的IP地址。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
6、回到开发者菜单然后选择Reload JS。

大致就是这么多了，最后，祝你成功；

React Native 学习之环境搭建

猜你喜欢