React-Native for android 的坑

分类:技术 标签:Reactjs, React-Native

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.下载android studio ,自带模拟器。
安装之。

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,需要新建一个。

附上几个截图:






你可能还会对下列文章感兴趣:

0条评论 你不想来一发么↓

    想说点什么呢?使用谷歌账号登录。

    您需要登录您的Google账号才能进行评论。