最近在学习react native,在这里记录我前期艰苦的学习历程
环境搭建:
安装 node.js
过程:
1.到node官网下载https://nodejs.org/en/
2.将node-v4.4.4-linux-x64.tar.xz 下载到的 文件解压到自己的目录.
3.将node配置成环境变量如下
export NODE_HOME=/home/djh/djh/node-v4.4.4-linux-x64
export PATH=$NODE_HOME/bin:$PATH
问题:
这个步骤简单 暂时没有出现任何问题.
安装 watchman
过程:
安装依赖
$ sudo apt-get install autoconf automake python-dev
安装 watchman, 如果出错, 查看安装依赖的详细文档
$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.3.0 # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
问题:
这个步骤简单 暂时没有出现任何问题.如果有问题可以参考文档
安装 react-native
过程:
npminstall−greact−native−cli问题:这个步骤简单暂时没有出现任何问题.创建helloworld项目过程: React-native init HelloWorld
问题:
This will walk you through creating a new React Native project in /home/djh/ReactNativeProject/HelloWorld
Installing react-native package from npm...
这个创建需要点时间,耐心等待.
运行helloworld
过程:
d:~/ReactNativeProject$ cd HelloWorld/
d:~/ReactNativeProject/HelloWorld$ react-native start
ERROR Packager can’t listen on port 8081
如果遇到这个错误说明有个服务已经在运行了,先关闭它
ERROR A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
{"watchmanResponse":{"version":"4.3.0","error":"A non-recoverable condition has triggered. Watchman needs your help!\nThe triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem. You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}
Error: A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1463647475: inotify-add-watch(/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/jstransform/node_modules/commoner/node_modules/iconv-lite/encodings/tables) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
at BunserBuf. (/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23)
at emitOne (events.js:77:13)
at BunserBuf.emit (events.js:169:7)
at BunserBuf.process (/home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/bser/index.js:289:10)
at /home/djh/ReactNativeProject/HelloWorld/node_modules/react-native/node_modules/bser/index.js:244:12
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
2.如果遇到这个问题 解决如下 在终端输入:
echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman shutdown-server
官网说这个是watchman的什么个数限制什么的,具体参考 https://facebook.github.io/watchman/docs/install.html#system-specific-preparation
3.因为是第一次弄傻傻的 什么都不懂就在这里一直等,其实服务起来后,就要新开个终端.在这个目录就可以运行到机器了. 这边用的是虚拟机Genymotion
运行apk到android设备
问题:
1.最好先配置好Android 的环境和build tool 这里一般需要23.0.1的
++export ANDROID_HOME=/home/djh/djh/adt-bundle-Linux-x86_64-20140702/sdk++
如果没有的话使用sdk Manager 下载好.不然会出现很多资源找不到的我问题.
2.第一次运行时间会比较久.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
3.遇到上面问题说明没有打开设备,将Genymotion打开.就可以了.
修改程序将文字修改成Helloworld
过程
1将工程目录下的 index.android.js 下面一段改改
class HelloWorld extends Component {
render() {
return (
container}>
Hello world
);
}
}
问题:
直接按住设备的菜单键 ,选择Reload js 就重新加载了.然后就变成下面的了
后续
将学习运行在真是的手机设备中.
遇到的一些坑
导入的类必须是大写的
1 import App from ‘./src/app’;正确
import app from ‘./src/app’;错误,
2 当从github新download下来一个项目,并运行react-native run-ios命令时,报React Native: Command run-ios unrecognized
1.第一步:
npm install –save react-native@latest
2.第二步:
npm install
3 这里你们要注意的是,运行react-native run-android之后,要在新的窗口运行服务器,具体方法是打开新的窗口进入文件目录,然后运行react-native start跑服务器。
4 .invariant violation:expected a component class,got[object object]
创建自定义组件首字母要大写,否则会报错.
5 .Module 0 is not a registered callable module.
将gradle升级成最新版本(cd
Android 进入android目录执行:sudo
./gradlew clean) 或者通过android studio工具升级.
6 .android.view.WindowManager$BadTokenException: Unable to add window – token null is not valid; is your activity running?
该错误属于安卓Native的错误,如果引用的Activity不存在或者已经销毁,再次引用就会报该错误,如果是React Native 调用原生控件的话,创建控件需要引用:getCurrentActivity()
7 .android.app.Application cannot be cast to com.facebook.React.ReactApplication
需要将创建的MainApplication在AndroidManifest.xml配置好.
8 .Element type is invalid: expected a string (for built-in components) or a class/function but got: object
发生原生一般是你引用了无效的组件,如果组件确实正确,看下引用的组件是否正常导出:(export defalut)
9 .react native undefined is not an object (evaluating this….
发生该错误的一般是忘记bind(this),只要回调函数中需要用到this的,一般都需要bind.
10 .react native - expected a component class, got [object Object]
该错误可能是你引用了小写的组件,组件首字母一定要大写,比如应该写成