React Native 学习笔记2

前端之家收集整理的这篇文章主要介绍了React Native 学习笔记2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目前看的时候以自己熟悉的 iOS 代入,熟悉 RN 了之后再调试 Android

TextInput

TextInput 是一个融合了 iOS 中的 UITextField 和 UITextView 的控件, autoFocusblurOnSubmitdefaultValueselectTextOnFocus这些属性使用起来非常方便,还有一些 iOS 和 Android 特有的属性,保留原有的,大概看了一下有哪些关键字,使用时再翻阅

ScrollView

一个可滚动的视图,直接和 View 一样使用,反正往上面堆就是了,它会自动按顺序可滚动,使用很方便

  1. 处理键盘属性
  • enum keyboardDismissMode (none,interactive,on-drag) 顾名思义就知道什么意思了,很是方便
  • bool keyboardShouldPersistTaps 点击空白处失焦
  1. 下拉刷新 提供了一个专门的组件 RefreshControl 主要是 onRefresh(func) refreshing(bool) ,其他属性都是 iOS 和 Android 不同平台特有 还没有用,有个大局观

  2. 布局 滚动方向什么的一些 scrollView 特有的 style 需要通过 contentContainerStyle 来设置,View 原有的 style 也可以直接在这里面写,不用单独分开写

开始我直接在 style 里面设置方向,就是使用的 flexBox 中的 FlexDirection,设置为 row,发现无法成功,然后去查了 scrollView 的完整文档,才发现是需要在设置 horizontal属性

<ScrollView horizontal={true}>
    // views
</ScrollView>

ListView

ListView 其实就是 TableView,通过 ListViewDataSource 来传递数据,并绘制 cell,没有 iOS 中去设置 section,row 的这种概念,直接将数据源传递过去,然后绘制 UI 即可

DataSource

最重要的方法

  • cloneWithRows(dataBlob,rowIdentities)
  • cloneWithRowsAndSections(dataBlob,sectionIdentities,rowIdentities) 有 section 时使用

提醒某行数据发生变化 rowShouldUpdate

大概看了下,感觉用起来很不能上手,后面再深究

学习日志

|2016.12.28|内容| |-|-| |18:07-19:00| TextInput|

|2016.12.29|内容| |-|-| |16:10-16:40| scrollView | |16:40-17:13| 学习笔记(textInput,scrollView)| |17:20-17:38| listView & 学习笔记 |

原文链接:https://www.f2er.com/react/305136.html

猜你在找的React相关文章