Skip to content

CoderLim/ReactNativeLeaning

Repository files navigation

ReactNativeLeaning:ES6版本;

前言

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

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

其中MoviesSinaWebBo实际项目,后者依然在抽空码代码,如遇到错误请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:

image image

Movies:

image