RN系统组件精讲

View：ui构建的基石，一切页面的起点

1. flexDirection：横向纵向布局

2. flexGrow和flex比较

   1. flexGrow是把剩余空间按照比例分配

   2. flex是把父类重新分配，不看自生的宽度或高度

3. 尺寸属性传数值和百分比

4. position：absolute绝对定位下仍然受父级属性的影响

5. onLayout：布局信息的回调

6. setNativeProps:性能瓶颈下的选择余地

Text:使用占比最高的组件

1. 字体属性：fontSize,fontFamily,fontWeight

2. 行数以及修饰模式：numberOfLines，elipsizeMode

3. 是否可选中以及选中色号：selectable,selectionColor

4. 点击和长按：onPress,onLongPress

5. 跟随系统字号：allowFontScaling

6. 文字嵌套及注意事项

7. 文本对齐：textAlign,textAlignVertical

8. 文本装饰：textDecorationStyle,textDecorationLine

9. 文本阴影：textShadowColor,textShadowOffset,textShadowRadius一起使用

Image：构建精美ui

1. 图片源的两种类型：source

   
   ​
   

2. 缩放模式：resizeMode

3. blurRadius: 曾经的难题现在如此简单，模糊

4. 占位图片：defaultSource 图片未加载完整 先用占位图片显示

5. 渐入动画时间：fadeDuration

6. 加载成功和加载失败：onLoad，onError

7. 加载开始和加载结束：onLoadStart，onLoadEnd

8. 着色：tintColor

9. api：Image.getSize(),Image.prefetch()

ImageBackgroud: View和Image的结合

1. style和imageStyle

2. ref和imageRef

TextInput:唯一且强大的输入组件

1. 字体样式：和Text一致

2. 自动聚焦；autoFocus和focus()

3. 自动失焦：blurOnSubmit和blur()

4. 隐藏光标：caretHidden

5. 默认输入：defaultValue

6. 可编辑性：editable

7. 键盘类型：keyboardType

   • default

   • number-pad

   • decirmal-pad

   • numeric

   • email-address

   • phone-pad

8. 确定键配置：returnKeyType

   • done

   • go

   • next

   • search

   • send

9. 最大长度：maxLength

   1. 多行输入：multiline和numberOfLines

10. 焦点回调：onBlur和onFocus

11. 内容回调：onChange和onChangeText

12. 选中相关：selection，selectionColor，selectTextOnFocus

13. 对齐方式：textAlign，textAlignVertical

14. 安全模式：secureTextEntry

TouchableOpacity：最好用的点击组件

1. 透明度渐变阈值：activeOpacity

2. 点击事件：onPress，onLongPress,delayLongPress

3. 点击事件起止：onPressIn,onPressOut

TouchableHighlight:使用略显麻烦

1. 所有点击类事件和TouchableOpacity相同

2. 只支持一个子节点

3. 使用陷阱：必须复写onPress

TouchableWithoutFeedback：几乎不用

1. 官方文档：除非你有个很好的理由，否则不要用这个组件，所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈

2. 只支持一个子节点，且自身不支持样式

Button：使用简单，但样式固定

1. title：设置按钮显示文字，color：设置按钮颜色

2. disabled：设置按钮不可点击

3. onPress：设置按钮点击事件

强大的Pressable

1. 点击类事件和其他点击组件一致

2. 带状态样式和带状态子节点

3. 代码简写

ScrollView:基础滚动组件

1. 添加子节点：固定子元素，列表渲染，数组渲染

   • // 固定子元素渲染
     

     
                 1
                 2
                 3
                 4
                 5
     

   • // 列表渲染
     

     
                 {array.map((item,index)=>{
                     return (
                         {`List item ${item}`}
                     )
                 })}
             
         )

   • // 数组渲染
     

     export default ()=>{
     ​
         // const array = [1,2,3,4,5];
     ​
     ​
         const buildListView=()=>{
             const array = [];
             for(let i=0;i<10;i++){
                 array.push(
                     {`List item ${i+1}`}
                 )
             }
     ​
             return array;
         }
     ​
     ​
         return (
             
                 {buildListView()}
             
         )
     }

2. 内容包裹样式：contentContainerStyle

3. 滚动键盘消失：keyboardDismissMode

4. 点击收起键盘：keyboardShouldPersistTaps

5. 滚动开始和结束：onMomentumScrollBegin/End

6. 滚动距离监听：onScroll(IOS:ScrollEventThrottle)

7. 超出滚动：overScrollMode

8. 分页滚动：pagingEnabled，滚动方向：horizontal

9. 滚动开关：scrollEnable

10. 初始滚动：contentOffset

11. 是否展示滚动条：showVerticalScrolllndicator/Horizontal

12. 吸顶元素：stickyHeaderlndices

13. api：scrollTo() scrollToEnd()

FlatList:高性能列表组件

1. 基础使用：data，renderItem，keyExtactor

2. ScrollView属性：内容容器，滚动条，滚动监听，键盘模式等

3. 横向纵向：horizontal

4. 表头：ListHeaderComponent

5. 表尾：ListFooterComponent

6. 空元素：ListEmptyComponent

7. 分隔线元素：ItemSeparatorComponent

8. 初始化渲染元素：initialNumToRender

9. 反向：inverted

10. 多列排布：numColumns

11. 可见元素回调：onViewableItemsChanged

12. 滚动到指定元素：scrollToIndex(),scrollToItem()不推荐

13. 滚动到指定距离：scrollToOffset()

14. 滚动到底：scrollToEnd()