ZhiHuDaily-React-Native编译

知乎日报的github地址:https://github.com/15527822118/ZhiHuDaily-React-Native
如果reactnative命令一直出现版本错误就调用nvm install node && nvm alias default node更新node的版本
node更新到4.0版本的命令:curl https://raw.github.com/creationix/nvm/v0.4.0/install.sh | sh
使nvm更新的结果生效~/.nvm
修改local.properties的sdk.dir没有用就使用export ANDROID_HOME=/usr/local/eclipse/adt-bundle-linux-x86_64/sdk.
首先android下面的build.gradle依赖的classpath配置成com.android.tools.build:gradle:1.2.3
android/app/build.gradle编译的sdk版本配置成23,buildtool版本配置成23.0.1,然后下载support-v4的23.0.1版本放在/opt/sdk/extras/android/m2repository/com/android/support/support-v4目录下面。
appcompat-v7放在/opt/sdk/extras/android/m2repository/com/android/support/appcompat-v7目录下面。
android ndk的版本要配置成r10的,这样才能够正确的编译。
编译命令如下:npm install安装node modules,然后使用react-native run-android安装到设备上面。

在编译react-native源码时https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip的下载会需要很久,所以用wget另外下载,然后把它放到build/downloads目录。

react-native项目导入android-studio中只要将android目录导入,然后在命令行中运行react-native start即可。

react相关介绍地址
http://reactnative.cn/blog.html

问题:
使用react-native init hello新建一个react项目,在index.android.js里面添加需要显示的内容,在package.json文件中添加的scripts里面添加”bundle-android”: “react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/build/intermediates/assets/debug/index.android.bundle –sourcemap-output android/app/build/intermediates/assets/index.android.map –assets-dest android/app/build/intermediates/res/”生成相应的bundle文件,不然就无法调用到js文件,屏幕变成白色。

react-native需要学习的前段知识有javascript,react,component,state,props,require的原理等。后端知识要学node。
require(x)源码的执行过程:var React = require(‘react-native’)的作用就是导入node_modules/react-native/Libraries/react-native/react-native.js这个文件,同理,require(x)源码的执行过程是:(1)如果x是内置模块,a返回该模块,b不再继续执行;(2)如果x以“./”或者”/”或者”../”开头,a根据x所在的父模块,确定x的绝对路径,b将x当成文件,(x x.js x.json x.node),c将x当成目录(x/package.json x/index.js x/index.json x/index.node);(3)如果x不带路径,a根据x所在的父模块,确定x可能的安装目录,b依次在每个目录中,将x当成文件名或目录名加载。(4)返回找不到。

java层与javascript层的联系
(1)首先继承ReactContextBaseJavaModule类,比如xmodule,实现它的getName方法比如返回”x”,可以在类里面添加其他的方法比如getresult;
(2)将xmolue注册到前面appreactpackage类的creactnativemodules方法中,调用modules.add(new xmodule(reactContext)),然后新建x.js文件,在该文件中调用require(‘react-native’).x可以得到java层的组件,然后在javascript中可以重新创建并初始化该层的组件,创建与java层同样的函数;
(3)调用require(“x”)将该x.js文件引入y.android.js,就可以调用x相关的方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值