coderlim/reactnativeleaning

How to learn ReactNative

ReactNativeLeaning：ES6版本；

前言

从学习到实战，过程该如何把握，详情请参考我的博客。

前面是基础知识，后面是两个实战项目，第一个是用Es6重写官方Movies，第二个是个人项目：新浪微博

其中Movies和SinaWebBo是实际项目，后者依然在抽空码代码，如遇到错误请PR或提问。

目录

• 0.GUIDES
  • 0.1NativeModuleIOS js使用原生模块
  • 0.2NativeUIComponents 定义原生MapView供js使用
• 1.AwesomeProject 第一个RN项目
• 2.使用控件
  • 2.1 ActivityIndicatorIOSTest: 旋转的菊花
  • 2.2 DatePickerIOSTest: 时间选择器
  • 2.3 TouchableHighlightTest: 可点击，还有与之相关的TouchableOpacity
  • 2.4 NavigatorTest : 顶部导航栏
  • 2.5 TabBarIOSTest : 底部导航栏
  • 2.6 WebViewTest : 显示网页
• 3.API
  • 3.1 Animated:介绍了timing，spring，decay，sequence，parallel
  • 3.2 PanResponderTest: RN貌似只提供了一个实现手势的方法
  • 3.3 LayoutAnimationTest: 一次性动画
  • 3.4 ModalTest：还记得模态窗口吗？
• 4.实例
  • 4.1 FacebookMovies ：根据官方的Movies的ES5版本用ES6实现，简化版
  • 4.2 SinaWebBo: 微博，如果你看着项目名别扭，那就对了，手误，不过将错就错吧

总结SinaWebBo遇到的坑

总感觉框架不成熟，有问题就开始想是不是框架的问题，其实年轻人你的很多bug还是要多从自身考虑，下面来总结几个废了点时间的“坑”

• 1.invalid png
  • SinaWebBo中的icon是我从已有的native项目中考过来的，居然会提示我无效的png，难不成RN显示icon有问题？上哪儿哭去？网上居然没有遇到这种问题的人，于是去技术群里问问吧，最后还是有个热心的伙计说帮我看看，在他的程序里也是报错，他告诉我说：肯定图片有问题，因为我这里（windows）打不开。但是我这里（mac）可以正常访问。
  • 最终的解决方法是我使用mac的“预览”重新导出对应的图片为png（勾选alpha），于是程序可以访问了
• 2.cell重叠
  • cell为什么会重叠呢？去网上找找吧，没有这种提问，好吧，难不成我又犯了什么弱智的问题？
  • 果然是弱智的问题，cell的最外层view不能设置flex：1，因为如果设置成flex：1，那所有cell的高度都是一样的
• 3.can not read property of 'xxx'
  • 如果你反复检查代码没问题，那就看看是不是在忘了bind，比如是错误的，应该写成
  • ，希望以后支持ES7的这种绑定："::this._clickMyView"

HOW TO USE?

1.下载或克隆代码；
比如想运行0.NativeModuleIOS
2.cd 到0.NativeModuleIOS目录；
3.npm install
4.react-native run-ios，如果报的错不知为何物，把0.NativeModuleIOS文件夹更名为NativeModuleIOS，重新运行。

DEMO

SinaWebBo:

Movies：

reactnativeleaning's Issues

运行红屏错误

hi，
我在运行Demo时候出现了一些问题，当环境和编译都配置好通过后，运行0.1和0.2的时候，会出现红屏错误，并有以下提示，暂时还未解决，不知道有没有什么解决方案，望收到回复