w3ctech

react-native 系列(一):快速入门指南

勇者啊,让我们一起开启新世纪的大门吧!(这么说会不会有点中二www

买装备,做准备

  • OS X - 因为android我们还搞不定的原因,所以目前的版本暂时只支持iOS实现,并且只有 Mac 上的 Xcode 才可以运行噢,没有 Mac 的24k纯屌们就关掉本教程继续好好做你们的前端去吧,看了也是心里的痛!
  • Xcode 得是最新版本噢,还没有的去MacAppStore里赶紧下一个
  • Homebrew 可以傻瓜安装node,watchman和flow。(虽然后两者与本例没太大关系,咳咳,广告还是要有的,一个是监控文件改动的,一个是检查JS静态类型的
  • 执行brew install nodenodenpm 都要求最新噢。
  • 执行 brew install watchman。 虽然没啥用,但求各位大大还是跟着下个 watchman 吧,这样在感觉上能够减少bug出现的几率,嗯嗯……
  • 执行brew install flow 。 虽然我们也不知道flow能用来干嘛,装上吧……

PS:途中可能遇到各种BUG,什么连不上国外的服务器啊,ruby版本错误啊(都请自行doodle之

快速开始撸一发

  • npm install -g react-native-cli
  • react-native init AwesomeProject

各种完成之后,我们进入新创建的文件夹 AwesomeProject/

  • 用 Xcode 打开 AwesomeProject.xcodeproj这个文件,并且狠狠的点击运行(run)按钮,会跳出iOS模拟器,此时ipa已经在正常运行状态中了!
  • 用编辑器打开index.ios.js这个文件,然后运用你多年的搬砖技术去coding一些东西吧,让文件产生变化
  • 然后在你的iOS模拟器上按 cmd+R 两次!没错,颤抖吧!你的改动已经生效了!

Congratulations!你已经成功运行并修改了你的第一个 React Native App 。下一节我们将解放你的双手,让你实实在在的感受到深入浅出RNA的快感。(译者抠鼻孔中

w3ctech微信

扫码关注w3ctech微信公众号

共收到1条回复

  • 尝试用React Native 做了个新闻APP,实现了简单的 新闻列表、新闻详情页面;主要用了 TabBar、Navigator、ListView、TouchableOpacity、ScrollView 等组件。 github地址如下,求Star,欢迎贡献代码,一起来完善~ https://github.com/tabalt/ReactNativeNews

    回复此楼