前置要求
React Native 使用XML格式描述一个UI,使用 JavaScript进行逻辑开发,这种语法叫做:JSX
- .jsx:表示一个JavaScript文件,并且使用了JSX语法
- .tsx:表示一个TypeScript文件,并且使用了JSX语法
这两者与.js\.tx
并没有什么区别,只是告诉编译器使用了那种语法
解析时:遇到<>则当HTML进行解析,遇到{}则当JavaScript处理,例如下面的例子:
<View
style={{
flex: 1,
alignItems: 'center',
}}>
<Text> Hello </Text>
</View>
// Q: 这里为什么是两个双引号?
// A: 最外层的{}代表这是一段JS代码。第二层则是JS语法中代表一个有flex、alignItems属性的对象
环境搭建
搭建RN编译环境一共有两种方式:Expo 与 React Native CLI
- Expo:这是一套与React Native构建相关的工具和服务,可以让你很快速的从0构建一个纯RN项目。
- React Native CLI:这是一个Node.js的插件,是React Native自带的一个脚手架工具,可以方便的构建RN项目
node.js、npm、yarn、npx
在继续往下讲两种搭建环境方式之前,先介绍一下以后会用到的一些名词含义及区别。
- node.js:是一个开源、跨平台的JavaScript运行时环境,类似于JAVA虚拟机
- npm:当我们下载node.js时,npm便会跟随一起被安装,它是JavaScript平台的包管理器,通过它可以很方便的管理项目中依赖的第三方库
- yarn:同样也是JavaScript平台的包管理器,他和npm的功能一模一样,不同之处在于下载时yarn支持并行下载,速度比npm快。当然还有一些细节的差异,例如yarn能够占用更小的内存。详细可见:www.copycat.dev/blog/yarn-v…
- npx:如果你的npm版本在5.2.0以上,那么npx也会跟随被安装。它是一个npm内的程序包,它可以让你在不下载的情况下运行任何在npm平台注册的第三方库
Expo
一个纯RN项目是比较少的,所以这里简单叙述一下即可,当然Expo搭建一个RN项目也是非常简单。
// npx
npx create-expo-app AwesomeProject
cd AwesomeProject
npx expo start
// yarn
yarn create expo-app AwesomeProject
cd AwesomeProject
yarn expo start
你可以选择用npx或者yarn任意一种工具进行RN项目的快速创建。
React Native CLI
不同平台搭建流程略有不同,下面以Window-Android为例,更多平台搭建可参考:reactnative.dev/docs/enviro…
由于纯的RN项目可以用Expo快速搭建,以下讨论的为RN和原生混合开发情况。
- 准备好一个原生Android项目,并能正常打包APK
这一步的目的是确保你能配置好最基本的Android开发相关环境
- 使用npx调用react-native库初始化项目
npx react-native@latest init AwesomeProject
上面有解释道,npx可以不下载就使用npm上的库,这里就使用react-native的最新版本,初始化一个名为AwesomeProject的项目
注: 如果你已经用npm提前下载了react-native这个库,那你可以用以下命令卸载它,避免意外的错误
npm uninstall -g react-native-cli @react-native-community/cli
如果你想指定react native库的版本,你可以使用以下指令
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
到这里项目环境已经搭建好了,下一步让我来看如何将其安装至手机上。
如果你想知道一个现有的原生项目,如何添加RN内容进去,你可以参考:reactnative.dev/docs/integr…
启动RN
在很多教程上都会有以下的命令教你如何启动RN
//yarn
yarn android
//npm
npm run android
//或者
//yarn
yarn start
//npm
npm run start
可是我们打开yarn或者npm支持的所有指令集会发现
也就是说yarn和npm并不支持start和android 参数的,但是为什么又可以启动react native?
原来: 当yarn或者npm后面的参数并不支持时,会去当前项目下 package.json
文件下寻找 scripts
标签,并找到对应的参数填入。哪有人又要问了,如果package.json 也没有找到又会怎么办,最后一道工序就是去yarn已经下载好了的第三方库匹配了。
打开package.json如下:
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
//...以下省略
}
这个时候我们再来看启动脚本:yarn start
就等于 yarn react-native start
,虽然react-native也不是yarn本来就支持的参数,但是这是第三方的库,最后会调用react-native这个库支持的start命令。
同理,yarn android
等于 yarn react-native run-android
真机调试
React Native启动以后会在电脑上占用一个端口,默认情况是8081端口
由node启动的一个服务,为什么要讲这个呢?是因为调试与这个端口有关,真机调试一共有两种方式:WIFI、USB
WIFI调试
我们在APP中的RN页面晃动手机,此时会弹出RN的设置页面:com.facebook.react.devsupport.DevSettingsActivity
选择:Settings -> Debug serve host & port for device
并设置你电脑的ip和RN启动的端口即可。
注: 电脑和手机需要在同一个局域网
想要检查是否连接成功,可以在RN命令行输入’d’手机会打开RN设置页,这样就算连接成功。
USB调试
与WIFI调试类似,首先需要连接USB并能够通过adb devices
查找到设备,然后需要输入一条命令
adb reverse tcp:8081 tcp:8081
这条命令的作用是:映射电脑上的8081端口到手机上的8081端口。
首先电脑上的8081端口是由RN服务使用,将其映射到手机的8081端口后,手机就可以直接通过localhost:8081
访问到RN服务了。所以不要忘记如WIFI调试一样,在Settings -> Debug serve host & port for device
设置IP端口为:localhost:8081
修改RN服务端口
默认情况使用8081端口,当然是可以修改,通过参数:--port=
进行设置,如下例子:
yarn react-native start --port=8090
原文链接:https://juejin.cn/post/7346763303430225929 作者:Tiger_Hu