RN系统组件精讲

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

flexDirection：横向纵向布局
flexGrow和flex比较
1. flexGrow是把剩余空间按照比例分配
2. flex是把父类重新分配，不看自生的宽度或高度
尺寸属性传数值和百分比
position：absolute绝对定位下仍然受父级属性的影响
onLayout：布局信息的回调
setNativeProps:性能瓶颈下的选择余地

Text:使用占比最高的组件

字体属性：fontSize,fontFamily,fontWeight
行数以及修饰模式：numberOfLines，elipsizeMode
是否可选中以及选中色号：selectable,selectionColor
点击和长按：onPress,onLongPress
跟随系统字号：allowFontScaling
文字嵌套及注意事项
文本对齐：textAlign,textAlignVertical
文本装饰：textDecorationStyle,textDecorationLine
文本阴影：textShadowColor,textShadowOffset,textShadowRadius一起使用

Image：构建精美ui

图片源的两种类型：source

<Image source={本地图片路径}/>

<Image source={{uri:远程路径}}/>
缩放模式：resizeMode
blurRadius: 曾经的难题现在如此简单，模糊
占位图片：defaultSource 图片未加载完整先用占位图片显示
渐入动画时间：fadeDuration
加载成功和加载失败：onLoad，onError
加载开始和加载结束：onLoadStart，onLoadEnd
着色：tintColor
api：Image.getSize(),Image.prefetch()

ImageBackgroud: View和Image的结合

style和imageStyle
ref和imageRef

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

字体样式：和Text一致
自动聚焦；autoFocus和focus()
自动失焦：blurOnSubmit和blur()
隐藏光标：caretHidden
默认输入：defaultValue
可编辑性：editable
键盘类型：keyboardType
- default
- number-pad
- decirmal-pad
- numeric
- email-address
- phone-pad
确定键配置：returnKeyType
- done
- go
- next
- search
- send
最大长度：maxLength
1. 多行输入：multiline和numberOfLines
焦点回调：onBlur和onFocus
内容回调：onChange和onChangeText
选中相关：selection，selectionColor，selectTextOnFocus
对齐方式：textAlign，textAlignVertical
安全模式：secureTextEntry

TouchableOpacity：最好用的点击组件

透明度渐变阈值：activeOpacity
点击事件：onPress，onLongPress,delayLongPress
点击事件起止：onPressIn,onPressOut

TouchableHighlight:使用略显麻烦

所有点击类事件和TouchableOpacity相同
只支持一个子节点
使用陷阱：必须复写onPress

TouchableWithoutFeedback：几乎不用

官方文档：除非你有个很好的理由，否则不要用这个组件，所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈
只支持一个子节点，且自身不支持样式

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

title：设置按钮显示文字，color：设置按钮颜色
disabled：设置按钮不可点击
onPress：设置按钮点击事件

强大的Pressable

点击类事件和其他点击组件一致
带状态样式和带状态子节点
代码简写

ScrollView:基础滚动组件

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

// 固定子元素渲染

<ScrollView style={styles.root}>
           <Text style={styles.txt}>1</Text>
           <Text style={styles.txt}>2</Text>
           <Text style={styles.txt}>3</Text>
           <Text style={styles.txt}>4</Text>
           <Text style={styles.txt}>5</Text>
</ScrollView>

// 列表渲染

<ScrollView style={styles.root}>
           {array.map((item,index)=>{
               return (
                   <Text style={styles.txt} key={`item-${index}`}>{`List item ${item}`}</Text>
               )
           })}
       </ScrollView>
   )

// 数组渲染

export default ()=>{

   // const array = [1,2,3,4,5];


   const buildListView=()=>{
       const array = [];
       for(let i=0;i<10;i++){
           array.push(
               <Text style={styles.txt} key={`item-${i}`}>{`List item ${i+1}`}</Text>
           )
       }

       return array;
   }


   return (
       <ScrollView style={styles.root}>
           {buildListView()}
       </ScrollView>
   )
}

内容包裹样式：contentContainerStyle
滚动键盘消失：keyboardDismissMode
点击收起键盘：keyboardShouldPersistTaps
滚动开始和结束：onMomentumScrollBegin/End
滚动距离监听：onScroll(IOS:ScrollEventThrottle)
超出滚动：overScrollMode
分页滚动：pagingEnabled，滚动方向：horizontal
滚动开关：scrollEnable
初始滚动：contentOffset
是否展示滚动条：showVerticalScrolllndicator/Horizontal
吸顶元素：stickyHeaderlndices
api：scrollTo() scrollToEnd()

FlatList:高性能列表组件

基础使用：data，renderItem，keyExtactor
ScrollView属性：内容容器，滚动条，滚动监听，键盘模式等
横向纵向：horizontal
表头：ListHeaderComponent
表尾：ListFooterComponent
空元素：ListEmptyComponent
分隔线元素：ItemSeparatorComponent
初始化渲染元素：initialNumToRender
反向：inverted
多列排布：numColumns
可见元素回调：onViewableItemsChanged
滚动到指定元素：scrollToIndex(),scrollToItem()不推荐
滚动到指定距离：scrollToOffset()
滚动到底：scrollToEnd()

文章作者: Mr. Fortunate

文章链接: https://www.fortunate.cool/2023/05/20/RN%E7%B3%BB%E7%BB%9F%E7%BB%84%E4%BB%B6%E7%B2%BE%E8%AE%B2/

react native react.js