cover-image

疑难杂症1

问题描述:

使用 cnpm@4.2.0 安装的模块, 在 react-native 下无论用何种姿势都无法加载.

react-native-cli: 0.1.10
react-native: 0.21.0

解决:

经过过各种排查, 发现 cnpm4 使用了类似 pnpm 的 node_modules 文件目录组织结构以加速安装过程和减少递归依赖的文件体积

.
└─ node_modules/
   ├─ .store/
   │  ├─ chalk@1.1.1/_/
   │  │  └─ node_modules/
   │  │     ├─ ansi-styles      -> ../../../ansi-styles@2.1.0/_
   │  │     ├─ has-ansi         -> ../../../has-ansi@2.0.0/_
   │  │     └─ supports-color   -> ../../../supports-color@2.0.0/_
   │  ├─ ansi-styles@2.1.0/_/
   │  ├─ has-ansi@2.0.0/_/
   │  └─ supports-color@2.0.0/_/
   └─ chalk                     -> .store/chalk@1.1.1/_

其中 -> 表示软链接. 而在 RN 的实现中, 并不能处理这种软链. 而 npm 3.8.1 虽打平了目录结构, 但仍直接使用文件夹的存储形式, 所以不会有这个问题.

故在 RN fix 之前的临时解决方案是安装第三方包时使用 npm 代替 cnpm 既可, 并指定 registry 以提高安装速度.

以下是我给 cnpm 提的 issue#94 以及 react-native 的相关 issue #4968

疑难杂症2

问题描述:

同样可以在 iOS 运行的代码 (所有三方包兼容双客户端), 放到 android 下报 network error.

async componentDidMount () {  
    const rep = await fetch('http://hongyan.cqupt.edu.cn/api/kebiao', {
      method: 'POST',
      body: 'stuNum=2013211854'
    });
    const kb = await rep.json();
    // code ...
}

解决:

POST请求中, 安卓必须添加 headers 字段. 在示例代码中, 有关于 headers 的描述, 但是并没有指出在 Android 下必须写这个字段.

更进一步的尝试发现, 最少只需要添加 Content-Type字段既可成功发送接受 HTTP 报文.

fetch('http://hongyan.cqupt.edu.cn/api/kebiao', {  
      method: 'POST',
      body: 'stuNum=2013211854',
      headers: {
        'Content-Type' : 'application/json;charset=UTF-8'
      }
}).then(...).catch(...);

姿势3

概述:

安装 Android SDK 并配置的过程中, 务必选择安装 Android SDK Build-tools version 23.0.1(版本严格匹配23.0.1), 使用其它版本则无法通过 gradlew (react-native run-android) 编译过程.

姿势4

概述:

启动安卓模拟器之后, 要第一时间按 Cmd + M, 手动指定 packager 所在机器 IP 及端口.

Update At 2016-03-18 00:16:23

更多待更新...

扫描二维码,分享此文章

Ling.'s Picture
Ling.

Web开发者. 前端,NodeJS 😈 大三, 找实习啦 ⬇️戳简历⬇️