通过示例程序可以看到一些基本组件的使用,对于学习ReactNative是很有帮助的。
编译示例程序需要将整个项目导入到androidStudio中,androidStudio导入项目时选择react-native/ReactAndroid目录。
由于项目依赖ndk因此如果要编译Examples还需要安装配置ndk目录,下载ndk后是一个自解压程序,会释放ndk的目录。
然后需要设置环境变量或者在react-native根目录下新建local.properties文件,文件内容如下:
sdk.dir=c:/你的sdk目录
ndk.dir=c:/你的ndk目录
设置要之后就可以编译了,导入和编译的过程比较曲折,请继续看下文。
在编译AwesomeProject项目时,没有用到ndk,实际上这里的ndk默认情况下并没有用到,只是gradle的设置里有ndk因此必须配置ndk才能导入项目。
ndk是在编译核心库是才用到,核心库位于react-native/ReactAndroid,导入整个项目时以lib形式存在。查看Examples目录下UIExplorer,会发现在build.gradle是以在线的方式导入核心库的。通过源码的方式导入被注释掉了。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0.11.+'
// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
// compile project(':ReactAndroid')
}
由此可知,编译UIExplorer并不需要ndk,如果你不想设置ndk,有2个办法
1.拷贝AwesomeProject项目中的build.gradle,settings.gradle到UIExplorer的android目录,在导入项目时选择UIExplorer/android就可以了,这样androidStudio会导入单个项目,否则会导入整个项目。
2.用androidStudio新建一个同名的项目,然后把UIExplorer目录中的文件拷贝到新建的项目中。
编译好之后启动服务器端,到react-native目录下执行:
npm install
node packager/packager.js
windows下如果出现错误需要根据错误提示修改代码http://www.cnblogs.com/zhaojietec/p/4853273.html
不过需要注意的是,目前为止,UIExplorer在Android下有一个bug,IOS下没有问题,通过google可以找到了解决办法。https://github.com/facebook/react-native/issues/2855
原因是,js代码和android原生代码不同步,通过build.gradle可以看到android下的引用的reactNative核心库为11,而js代码版本已经更新到12了。
解决的办法有2个,一个是使用git工具(如smartGit),将js代码恢复到之前的版本,另一个办法是重新编译reactNative的核心库,编译核心库需要ndk,在mac下没有问题,在windows编译会出错。编译reactNative核心库,对UIExplorer下注释掉的依赖项进行修改即可,编译速度较慢 需要在线下载第三方依赖库。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
// Depend on pre-built React Native//compile 'com.facebook.react:react-native:0.11.+'
// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
compile project(':ReactAndroid')
}
由于windows下无法编译,所以这里提供编译好的aar文件,修改UIExplorer build.gradle中的依赖项就可以了。至于如何引入aar文件,可以自行搜索。当然mac下同样也可以用这个aar,可以省去不少麻烦。
网盘下载地址(需要密码):链接:http://share.weiyun.com/f4460735f3b44a4e79ddc7032d6f95f7
由于本人刚建的微信公众号还没有人关注,因此请关注我的微信公众号:zhaojieTec,回复“aar”后获取密码。是的,你没有看错,这就是传说中的隐藏内容请回复查看。
另外网盘中也提供编译好的loader程序,UIExplorer (ps:facebook真是不厚道为什么不提供编译好的程序看一下想过呢)。