站点图标 久久日记本

React-Native Android 的坑

九九

React-Native Android 发布不久，尝试了一下，发现坑不少，姑且记录一下向导：

1.安装nodejs

2.安装git

3.clone react-native的项目:

git clone -b master https://github.com/facebook/react-native.git

如果被q就直接下master吧。

4.切换到react-native-cli目录中，安装react-native-cli

npm install -g

5.初始化AwesomeProject，貌似一个事例项目:

react-native init AwesomeProject

这里会下载项目和一些插件，需要耐心等待。

6.切换到react-native-cli\AwesomeProject\node_modules\react-native\packager\ 目录下，执行:

node packager.js
//或者在 react-native-cli\AwesomeProject 目录下执行 react-native start

发现报错，这个gist可以帮你解决这些问题，如果你无法打开，下面是原文转载:

========
Few Line of Hack Code Make React-Native Run on Windows

While React-Native just add support of Android,yet officeally they just only support on OSX.

After a few hours of debugging, I find a simple way of let React-Native run on Windows.

Make sure all requirements were all setup following this:

Then initilize the project following this:

The react-native run-android should deploy the app into you phone or AVD

While using 'react-native start' to run the dev server you may get some error couse it runs a bash file, goto /node_modules/react-native/local-cli/run-package.js,and change it to

'use strict';

var path = require('path');
var child_process = require('child_process');

module.exports = function(newWindow) {
  if (newWindow) {
    child_process.spawnSync('open', [
      path.resolve(__dirname, '..', 'packager', 'launchPackager.command')
    ]);
  } else {
    child_process.spawn('node', [
        path.resolve(__dirname, '..', 'packager', 'packager.js'),
        '--projectRoots',
        process.cwd(),
      ], {stdio: 'inherit'});
  }
};

Skip the bash and run the nodejs script instead.

Then the problem shows, fix it, already make a pull request https://github.com/facebook/react-native/issues/2787

Finally get A blank Activity,try adb logcat fetch the error log find out that, while the app load js from

ip:8081/index.android.bundle?platform=android Then get moudle load error.

Because some the moudle path be resolve as "path\path\package",and while the were define where "path\path\package".

Goto project\node_modules\react-native\packager\react-packager\src\DependencyResolver\index.js

function defineModuleCode({moduleName, code, deps}) {
  deps = deps.replace(/\\\\/g,'\\');
  return [
    `__d(`,
    `'${moduleName}',`,
    `${deps},`,
    'function(global, require, module, exports) {',
    `  ${code}`,
    '\n});',
  ].join('');
}

Since the moudle system were a litte bit complicate, this may not be the best solution, and neet more test before a pull request,but I think it will get you play around.

============

两个问题修改之后这时再次执行

node packager.js

就应该正常了。

图片

浏览

http://localhost:8081/index.android.bundle?platform=android

如果可以访问表示服务器端已经可以了，浏览器中访问时，刚才的命令行会显示进度。

打开http://localhost:8081/debugger-ui，可以下载浏览器调试插件。

7.下载[url=http://developer.android.com/sdk/index.html]android studio[/url] ,自带模拟器。
安装之。

8.打开Android Studio=>File=>New=>Import Project...

react-native-cli\AwesomeProject\android

9.调试，编译（注意手机要开启调试模式），这时会打开选择编译的程序是真机还是模拟器，如果已经插入真机，但是无法看到，应该是需要安装机器的驱动。

10.选择真机，apk文件会被安装到手机。

11.使用react-native编译.

在react-native-cli\AwesomeProject目录下，Git Bash执行

react-native run-android

确保6步骤中的js server未关闭，

JS Server already running.
Building and installing the app on the device(cd android && gradlew.bat install Debug)...
......
......
BUILD SUCCESSFUL
......

直到可以看到apk被安装到手机。

打开apk，红屏，错误界面。fuck....

这个gist可以说明我目前遇到的情况，

这个问题已经被提到react-native的issue等待修正。

update 2015-10-10:

关于红屏错误界面的解决方法：

=======

To bundle JS file into your apk while having your server running (react-native start) download bundle into assets directory of your app:

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

With the next release (0.12) we'll fix react-native bundle command to work with android projects as expected.

=======

如果没有assets，需要新建一个。

附上几个截图：

退出移动版