React Native Notes -- 2019

SunXinFei commented 5 years ago

环境配置遇到的问题

正如RN中文官网所说的 ---

！！！注意！！！：init 命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目！！！中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3的版本。

确实如果指定安装0.44.3版本，run ios的启动速度大概在编译了几分钟之后，就会开启demo界面，但是如果是没有指定版本的情况下，run ios 会有一个漫长的下载过程，其实也没有官网所描绘的那么夸张时间长，在翻墙的情况下，大概下载了半个小时，启动了launchPackager.command，编译成功。

android环境配置

android环境配置稍微麻烦一点，但是整体主要容易卡在Android Studio下载jar包，所以官方强调翻墙软件很重要，安装完Android Studio之后，打开会安装下载相关jar包，这段事件很漫长，安装完成之后，需要按照官网所说，检查包依赖是否正确。之后还有一点要注意：如果是虚拟设备中运行，需要提前配置好虚拟设备，并运行起来。

注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

环境配置总结

ios的环境配置在mac中比较简单，只要下载好XCode，注意官网提到的版本差异（新版本会有一个比较长的下载编译的时间）和用到了一部分的翻墙软件，基本上问题不大。

android的环境配置主要是看翻墙软件，如果稳定的话，Android Studio下载包依赖以及react-native run-android命令的安装编译依赖都会顺利通过，看到运行的界面。android还有一点不同的是，如果要用虚拟设备，需要先开启Android Studio中的虚拟设备，然后运行react-native run-android命令，这样才能看到项目。

关于真机调试

真机上面摇一摇即可呼起调试，注意如果打开了ios的调试，请完全退出，不然会提示8081端口占用之类的错误。安卓真机需要同时开启enable Live Reload和 enable Hot Reloading才能保证保存js，页面实时刷新。

关于相关文档与源码

官方很多文档和源码项目其实已经很旧了，大致为2-4年前的代码，RN的更新速度还是很快的，优先看组件和RN的官方文档，中文翻译文档可能会出现滞后和没有人维护的情况。

SunXinFei commented 5 years ago

关于React Navigation 3.x

官网地址：https://reactnavigation.org/docs/en/hello-react-navigation.html 注意点：

React Navigation 3.x和2.x的差别非常之大，中文文档和一些教程存在滞后性，所以一定要看官方英文对应版本的官方教程。
遇到的报错信息
Invariant Violation: The navigation prop is missing for this navigator 解决方案：参考文献--https://stackoverflow.com/questions/53367195/invariant-violation-the-navigation-prop-is-missing-for-this-navigator ，原因即为3.x的版本跨度很大，语法比之前变化很多，必须用createAppContainer包裹。 2.Cannot read property 'state' of undefined in react-navigation 解决方案：npm install --save react-native-gesture-handler react-native link react-native-gesture-handler
获取React Navigation中路由参数
传递参数
```
this.props.navigation.navigate('Detail',{
      itemId:666,
      otherStr:'12312312'
    })
```
2.获取参数推荐=>this.props.navigation.getParam('itemId') this.props.navigation.state.params.itemId 也可，但不推荐。注意：当参数不存在时，可以第二参数设置默认this.props.navigation.getParam('itemId','defaultValue')
你也可以直接使用this.props.navigation.state.params访问 params 对象。如果没有提供参数，这可能是null（我测试结果为undefined），所以使用getParam通常更容易，所以你不必处理这种情况。

标题设置以及动态设置

直接在组件中加入静态变量navigationOptions即可，其中动态标题设置
```
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
```
本页面如果要更新标题的话：
```
this.props.navigation.setParams({otherParam: 'Updated!'})}
```
标题样式设置

headerStyle：一个应用于 header 的最外层 View 的样式对象，如果你设置 backgroundColor ，他就是header 的颜色。

headerTintColor：返回按钮和标题都使用这个属性作为它们的颜色。在下面的例子中，我们将 tint color 设置为白色（#fff），所以返回按钮和标题栏标题将变为白色。

headerTitleStyle：如果我们想为标题定制fontFamily，fontWeight和其他Text样式属性，我们可以用它来完成。

SunXinFei commented 5 years ago

React Native中的网络请求

官方文档已经详细举例说明了如何使用fetch进行网络请求，这里我们使用axios一样的道理，没有任何因为在RN环境而写法上的区别，和React或Vue保持一致的写法或封装，即可运行。唯一要说明的就是关于网络请求的调试，这里chrome是不支持RN中的捕获网络请求的，官方也同样说明了，需要使用react-native-debugger。但是我实验出来的结果却是RN新版本迭代，react-native-debugger跟不上，会导致Network的请求依旧获取不到。

SunXinFei commented 5 years ago

Navigation Prop

这个 prop 将被传递到所有页面上，并且可以用于以下内容：

dispatch会向路由发送 action

state是页面的当前路由

getParam是访问可能在路由上的参数的助手

navigate、goBack等方法是触发事件的便捷方法

SunXinFei / sunxinfei.github.io