react-native 环境搭建 初次使用

React Native中文网

设备:win10 x64 目标Android

依赖安装

必须安装的依赖 Node(8.3以上)、Python2.x(不支持3.x)、Jdk必须为1.8 --(目前版本规范)
安装好之后运行如下命令
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
这些命令主要是设置npm镜像和加速以及yarn的镜像和加速,yarn是facebook提供替代npm的工具;

Android环境

这些环境我都有,最主要的是注意支持的版本说明:Android SDK Build-Tools 必须为27.0.3,还有ANDROID_HOME环境变量;印象中这个可以不配置可以开发原生Android,这里要配上;

只要细心注意版本号、必要的配置都做到,环境就已经搭建完毕啦!

创建react-native的项目

react-native init qaq —命令行中运行这个命令可以为我们在当前目录创建一个名为qaq的项目
(按住Shift+右键可以在当前文件夹打开命令提示符窗口)
如果这里有错误创建不成功,就绝对是依赖版本不对应或者环境变量没有配置,提示找不到,根据提示重新运行命令就好了
创建成功后的目录:

项目根目录
其中的android文件夹我们可以用android studio直接打开就是原生项目,只是略有区别;
ios文件夹应该就是xcode原生项目了,node_modules文件夹是react-native的依赖,其他文件我们先放一放不看,运行试试

运行到Android模拟器

首先打开android模拟器
在根目录中运行react-native项目(根目录为qaq文件夹下,不要混淆了)
react-native run-android — 运行这个命令;此过程会开启一个Node窗口服务,不要关闭
成功的话会看在模拟器看到这样的页面:
首次运行
我在这运行失败的原因就是没有配置ANDROID_HOME环境变量,和adb连接不上;

简单分析、猜测

index.js文件

字面上是注册组建 appName是from一个json文件,App是App.js文件
App.js

这个就是非常熟悉的便签,类似布局文件了,一些文本信息,写法有待学习
所以应该是以index为入口加载了app的页面,也就是app.js文件可以同时加载到android和ios设备;验证了跨平台的初衷

疑惑

node
第一次运行中我最大的疑惑是这个node蹦出来干嘛?难道我正式上线的时候也要在后台挂一个node嘛?url我在哪设置?迫切需要对react-native运行机制多做了解
当我了解到把react-native集成到现有原生项目和打包Apk的时候我才知道,这个node服务是为我们开发调试而做的动态加载页面的,当项目完结上线的时候,所有的js文件不会动态加载而是会编译成静态文件在我们的android项目的assets文件夹中

猜你喜欢

转载自blog.csdn.net/weixin_36965072/article/details/84844379