react native 学习实践----运行facebook官方提供的例子

可以参考官方github网站:facebook Movies appThe Movies app is a demonstration of basic concepts,such as fetching data,rendering a list of data including images,and navigating between different screens.

运行的命令如下:

git clone https://github.com/facebook/react-native.git
cd react-native
npm install
在Android模拟器运行:

cd react-native ./gradlew :Examples:Movies:android:app:installDebug ./packager/packager.sh

./gradlew :Examples:Movies:android:app:installDebug 这个命令会执行比较久,下载一堆的东西。特别是执行到ReactAndroid:downloadBoost时会需要较长的时间。这一步其实是在下载一个文件,文件路劲如下,可以手动查看下载的进度,这个文件一百多兆。

/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip'


在运行上面的命令之前,你需要先装好Android sdk,这个不必说了,开发Android必备,除了这个还需要安装好NDK,并设置好环境变量。 注意NDK不能用最新的12b版本,需要用10e版本 不然你会碰到下面的错误。ndk各版本下载链接:Android ndk 各版本

make: /Users/apple/Library/Android/sdk/ndk-bundle/toolchains/arm-linux-androideabi-4.8/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-g++: No such file or directory
make: /Users/apple/Library/Android/sdk/ndk-bundle/toolchains/arm-linux-androideabi-4.8/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-gcc-ar: No such file or directory
make: *** [/Users/apple/studyProject/react-native/ReactAndroid/build/tmp/buildReactNdkLib/local/armeabi-v7a/objs/folly_json/folly/StringBase.o] Error 1
make: *** Waiting for unfinished jobs....
make: *** [/Users/apple/studyProject/react-native/ReactAndroid/build/tmp/buildReactNdkLib/local/armeabi-v7a/objs/folly_json/folly/dynamic.o] Error 1
make: *** [/Users/apple/studyProject/react-native/ReactAndroid/build/tmp/buildReactNdkLib/local/armeabi-v7a/libboost.a] Error 1
:ReactAndroid:buildReactNdkLib FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':ReactAndroid:buildReactNdkLib'.
> Process 'command '/Users/apple/Library/Android/sdk/ndk-bundle/ndk-build'' finished with non-zero exit value 2

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

这个例子编译运行了,运行另一个示例UIExplorer示例就很容易了,不过运行UIExplorer时你可能会碰到下面的错误,处理这个错误很easy,reload JS就可以了。



运行Movies和UIExplorer



react native都是用JS的语法写的,对于我们这些以前使用C++,java,object-c写客户端程序的gg来说,看起来很蛋痛,下一步准备学习下js语法咯

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...