react native笔记

悠悠 2022-05-16 10:08 140阅读 0赞

# react native笔记 #

参考资料：

*  [react native中文教程][react native]
 *  [https://www.jb51.net/article/92931.htm][https_www.jb51.net_article_92931.htm]
 *  [【React Native入门系列文章 六】实战写一个电影列表页][React Native_]
 *  [React Navigation][]

## Android环境搭建 ##

**开发依赖安装**

*  Node：^6.0、React Native 命令行工具、
 *  Python2
 *  Java SE Development Kit(JDK): 1.8
 *  Andriod Studio

注意：要配置python、java和Android的系统环境变量。

# 安装react-native-cli命令行工具
    npm install -g yarn react-native-cli
    # 配置yarn
    yarn config set registry https://registry.npm.taobao.org  --global yarn config set disturl https://npm.taobao.org/dist  --global

**安装Android SDK**

在 SDK Manager 中选择”SDK Platforms”选项卡，然后在右下角勾选”Show Package Details”。展开`Android 6.0 (Marshmallow)`选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

*  `Android SDK Platform 23`
 *  `Intel x86 Atom_64 System Image`（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

![Android SDK Manager][]

然后点击”SDK Tools”选项卡，同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项，确保选中了 React Native 所必须的`23.0.1`版本。你可以同时安装多个其他版本，然后还要勾选最底部的`Android Support Repository`。

![Android SDK Manager - 23.0.1 Build Tools][]

最后点击”Apply”来下载和安装这些组件。

![Android SDK Manager - Installs][]

**解决[https://maven.google.com][https_maven.google.com] 连接不上**

参考自： [https://maven.google.com 连接不上的解决办法][https_maven.google.com 1]

直接替换android目录下的build.gradle中的 [https://maven.google.com][https_maven.google.com 2] 为 [https://dl.google.com/dl/android/maven2/][https_dl.google.com_dl_android_maven2]

**创建项目并运行**

react-native init projectName
    cd projectName
    react-native run-android
    react-native run-ios

## 问题解决 ##

参考自：

*  [React-Native Android真机测试 -unable to load script from assets ‘index.android bundle’…][React-Native Android_ -unable to load script from assets _index.android bundle]
 *  [Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle][Unable to resolve module _AccessibilityInfo_ when trying to create release bundle]
 *  [Error calling AppRegistry.runApplication][]
 *  [ReactNative踩坑之旅: Unable to resolve module 和 Error: Plugin][ReactNative_ Unable to resolve module _ Error_ Plugin]
 *  [React Native开发错误警告处理总结（已解决 ！持续更新）][React Native_ 1]
 *  [React Native 错误解决记录][React Native]

***错误1：unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or you’re runing a packager server***

解决办法

1，在 android/app/src/main 目录下创建一个 assets空文件夹

2，在项目根目录运行

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

运行完毕后assets文件夹下会多出`index.android.bundle`和`index.android.bundle.meta`两个文件

新版中index.android.js跟index.ios.js已经合并为index.js

3，重新`react-native run-android`

错误原因：index.android.bundle是用来调用原生控件的js脚本，每次当改变了 index.js，都需要使用上面的代码片段，来及时的更新index.android.bundle，然后打包才可以把新的index.js应用上，所以当没有index.android.bundle文件时，React-Native 项目是无法运行的。

4, 如果你运行第2步中的`react-native bundle...`命令报错提示**Unable to resolve module ‘AccessibilityInfo’**。具体报错信息如下：

Unable to resolve module `AccessibilityInfo` from `xxx\node_modules\react-native\Libraries\ react-native\react-native-implementation.js`: Module does not exist in the module map
    
    This might be related to https://github.com/facebook/react-native/issues/4968
    To resolve try the following:
      1. Clear watchman watches: `watchman watch-del-all`.
      2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
      3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.
      4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

![Image 1][]

从上可知，将0.56的react-native降级到0.55.4就可以解决问题了。

注意：一定要使用`npm install`去安装依赖，用`cnpm install`安装的可能是旧的模块，会导致出错。

5，如果第4步中你只是单纯的将react-native降级到0.55.4，其他依赖没有更新或安装的话，则会出现如下报错：

**Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”**

是在babel-preset-react-native包里的文件错误, 看了下那个文件, 没有那几行代码。

解决方法：更新babel-preset-react-native

npm uninstall --save babel-preset-react-native
    npm install --save babel-preset-react-native@4.0.0

***错误2：Error calling AppRegistry.runApplication***

错误原因：

*  8081端口被其他进程占用——将占用8081端口的进程杀死，重新运行`react-native run-android`，启动Node服务端。
 *  客户端无法访问服务端

在模拟器中按下`CTRL+M`，配置开发地址为localhost:8081

![enter image description here][]

![enter image description here][enter image description here 1]

![enter image description here][enter image description here 2]

真机则摇一摇手机，唤出菜单，Dev Settings -> Debug server host & port for device，输入**主机ip:8081** (手机和电脑必须连接相同的wifi)

重新运行`react-native run-android`

## **修改8081默认端口号的两种方式** ##

（1）启动项目时react-native start –port 8083  
（2）手动修改项目下的node\_modules\\react-native\\local-cli\\server\\server.js下的方法server.js文件，如下图所示。

![325][]

## 实战：电影列表 ##

[demo地址][demo]

### 登录认证 ###

示例通过react-navigator来进行路由跳转。首先通过判断是否登录，来决定进入的页面。

const Root = createSwitchNavigator(
        {
            AuthLoading: AuthLoadingScreen,
            App: AppStack,
            Auth: AuthStack,
        },
        {
            initialRouteName: 'AuthLoading',// the default router
        }
    );

使用createSwitchNavigator可以保证进入从Auth路由进入到App路由时，Auth路由被销毁，这样，用户就无法退回到Auth页面了。

登录页面如下图所示：

![这里写图片描述][70]

注意：

1、<TextInput>组件在React Native中，默认是带一条横线的，如果想去掉输入框下面的横线，需要给<TextInput>指定一个`underlineColorAndroid='transparent'`，这样就可以去掉输入框下面的横线了；

2、密码输入框需要指定属性：`secureTextEntry={true}`

3、要显示图片，必须为`<Image>`标签指定宽度和高度，和Android中不同的是，`<Image>`没法自动调整图片的大小，没有类似Android中的wrap\_content。

### 电影列表展示 ###

![这里写图片描述][70 1]

下拉刷新会去请求接口，获取最新的数据。点击某部电影，可以进入详情页面。

[react native]: https://reactnative.cn/docs/tutorial.html
[https_www.jb51.net_article_92931.htm]: https://www.jb51.net/article/92931.htm
[React Native_]: https://blog.csdn.net/colinandroid/article/details/77932277
[React Navigation]: https://reactnavigation.org/docs/en/getting-started.html
[Android SDK Manager]: /images/20220516/f979528e0eee4cebab4d526b33ca8ccd.png
[Android SDK Manager - 23.0.1 Build Tools]: /images/20220516/98e608c997a94477a7cc501b176bdd9b.png
[Android SDK Manager - Installs]: /images/20220516/c00f8d324cab49cfaa91331bbcce4c3e.png
[https_maven.google.com]: https://maven.google.com
[https_maven.google.com 1]: https://blog.csdn.net/a06_kassadin/article/details/72796696
[https_maven.google.com 2]: https://maven.google.com/
[https_dl.google.com_dl_android_maven2]: https://dl.google.com/dl/android/maven2/
[React-Native Android_ -unable to load script from assets _index.android bundle]: https://blog.csdn.net/sinat_34380438/article/details/77648476?locationNum=9&fps=1
[Unable to resolve module _AccessibilityInfo_ when trying to create release bundle]: https://stackoverflow.com/questions/48756550/unable-to-resolve-module-accessibilityinfo-when-trying-to-create-release-bund
[Error calling AppRegistry.runApplication]: https://stackoverflow.com/questions/43776638/react-native-android-error-calling-appregistry-runapplication
[ReactNative_ Unable to resolve module _ Error_ Plugin]: https://blog.csdn.net/j550341130/article/details/81027700
[React Native_ 1]: https://www.jianshu.com/p/98c8f2a970eb
[React Native]: https://www.jianshu.com/p/e447b29c0684
[Image 1]: 
[enter image description here]: https://i.stack.imgur.com/cqBr4.png
[enter image description here 1]: https://i.stack.imgur.com/KhGgB.png
[enter image description here 2]: https://i.stack.imgur.com/ZfCPt.png
[325]: /images/20220516/b7d17dcddd1f453a9df23939d6a7c521.png
[demo]: https://github.com/AngelaFighting/nativeProject
[70]: /images/20220516/83e608b521b14321a325d3d2bda50c0d.png
[70 1]: /images/20220516/6283d947f3f24d1bac16050ef4ef3295.png