RN系统组件精讲

最新推荐文章于 2024-08-06 11:09:59 发布

赊汝

最新推荐文章于 2024-08-06 11:09:59 发布

阅读量834

点赞数

文章标签： react native

本文链接：https://blog.csdn.net/m0_63685436/article/details/130783705

版权

本文详细介绍了ReactNative中几个关键的UI组件，包括它们的属性和用法，如flexDirection用于布局，Text组件的字体和样式，Image的图片处理，TextInput的输入功能，以及ScrollView和FlatList的列表滚动性能优化。还讨论了不同类型的触摸组件如TouchableOpacity和Button的交互特性。

摘要由CSDN通过智能技术生成

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