react native笔记

react native笔记

参考资料：

• react native中文教程
• https://www.jb51.net/article/92931.htm
• 【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（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

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

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

解决https://maven.google.com 连接不上

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

直接替换android目录下的build.gradle中的 https://maven.google.com 为 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’…
• Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle
• Error calling AppRegistry.runApplication
• ReactNative踩坑之旅: Unable to resolve module 和 Error: Plugin
• 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-*`.

从上可知，将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

真机则摇一摇手机，唤出菜单，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文件，如下图所示。

实战：电影列表

demo地址

登录认证

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

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

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

登录页面如下图所示：

注意：

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

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

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

电影列表展示

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