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()

你可能感兴趣的:(react,native)