当前位置：首页 > news >正文

React Native 基础组件详解＜一＞

news 2025/7/8 14:22:25

一、Text组件

1）numberOfLines：显示行数
2）ellipsizeMode：超出隐藏的位置 clip->裁掉 head/middle/ tail->点的位置
3）selectable: 是否可以选中
4）selectionColor：选中后的颜色
5）allowFontScaling: 跟随系统字体大小变化

export default () => {return (<View style={styles.root}><Text style={styles.txt}numberOfLines={2}ellipsizeMode="tail">我是基础组件Text我是基础组件Text我是基础组件Text</Text><Text style={styles.txt}selectable={true}selectionColor="yellow">我是基础组件Text2</Text><Text style={styles.txt}onPress={() => {console.log('我点')}}onLongPress={() => {console.log('我长按')}}>我是可以点击的基础组件Text3</Text></View>);
}

在这里插入图片描述

二、Image组件

1）source：图片源注意：本地和远程图片的区别
2）defaultSource：占位图片
3）resizeMode：缩放模式 content/center/cover/repeat/stretch
4）blurRadius：模糊
5）tintColor：用于改变图标颜色（重要）

<Imagestyle={styles.img} source={iconSetting} // 本地图片resizeMode='contain'blurRadius={2} /><Image style={styles.img} defaultSource={iconSetting} // 网络图没有加载出来的占位source={{uri: imageUri}} /> // 网络图片

在这里插入图片描述

<Imagestyle={styles.img2} source={iconSetting} />// ...
img2: {tintColor: 'red'}

在这里插入图片描述

三、ImageBackground组件

View和Image的结合
1）style：容器的样式
2）imageStyle：背景图的样式

<ImageBackgroundstyle={styles.card}imageStyle={styles.bg}source={cardBg}><Text style={styles.txt}>我是内容</Text>
</ImageBackground>// ...
card: {width: '100%',height: 150,flexDirection: 'row',alignItems: 'center',
},
bg: {opacity: .8,borderRadius: 12,
},

在这里插入图片描述

四、TextInput组件

1）自动聚焦：autoFocus = true 或者ref.focus()
2）自动失焦：blurOnSubmit = true 或者ref.blur()
3）defaultValue：默认内容
4）editable：是否可以输入 false是不能输入
5）keyboardType：键盘类型 number-pad(数字)
6）returnKeyType：确定键 done/go/next/send/search
7）maxLength：最大长度
8）multiline：是否允许多行
9）numberOfLines：显示的行数
10）selection：选中内容 {{start: 0 , end: 3}} 值是index
11）selectionColor：选中的颜色
12）selectTextOnFocus：第一次手动聚焦时，是否选中全部内容
13）secureTextEntry：是否密码模式，不可与multiline=true同用

<TextInputref={inputRef}style={styles.input}// autoFocus={true}blurOnSubmit={true}caretHidden={false}defaultValue="我是默认的内容"editable={true}keyboardType='number-pad'returnKeyType='search'// maxLength={11}// multiline={true}// numberOfLines={2}onFocus={() => {}}onBlur={() => {}}onChange={(event) => {console.log(event.nativeEvent);}}onChangeText={(text) => {console.log(text);}}// selection={{start: 0, end: 3}}selectionColor='red'selectTextOnFocus={true}secureTextEntry={true}/>// ...
input: {width: '100%',height: 50,backgroundColor: '#ccc',fontSize: 24,color: '#000',fontWeight: 'bold',},

五、TouchableOpacity组件 — 点击组件

activeOpacity：点击时不透明度的变化

<TouchableOpacitystyle={styles.button}activeOpacity={0.5}// x ~ 1不透明度变化范围onPress={() => {console.log('点击 ...');}}onLongPress={() => {console.log('长按 ...');}}delayLongPress={1000} // 长按规定时间onPressIn={() => {console.log('按下去 ...');}}onPressOut={() => {console.log('抬起来 ...');}}><Text style={styles.txt}>按钮</Text></TouchableOpacity>

六、TouchableHighlight组件 – 点击组件

underlayColor：按下去时高亮颜色
注意：1）只能有一个子节点
2）activeOpacity单个使用没有效果，必须和onPress一起用点击时才有不透明过渡效果

<TouchableHighlightstyle={styles.button}activeOpacity={0.8}onPress={() => {console.log('onPress ...');}}underlayColor="#00bcd4"><Text style={styles.txt}>按钮</Text></TouchableHighlight>

七、TouchableWithoutFeedback组件 – 几乎不用

注意：只支持一个子节点，而且自身不支持样式

<TouchableWithoutFeedback><Viewstyle={styles.button}><Text style={styles.txt}>按钮</Text></View></TouchableWithoutFeedback>

八、Button组件

1）title：必须
2）color：按钮颜色，不设置默认为蓝色
3）disabled：是否置灰
注意：不可定制样式

<Buttontitle='按 钮'// color={"green"}// disabled={true}onPress={() => {}}
/>

在这里插入图片描述

九、ScrollView组件

1）contentContainerStyle：包裹内容的容器的样式
2）keyboardDismissMode：当键盘拉起时，滚动键盘是否消失 on-drag(消失)
3）keyboardShouldPersistTaps：当键盘拉起时，点击滚动区域键盘是否消失 never(消失)/always(不消失)/handled(消失)
！！！never和handled的区别：**键盘和Button同时存在的情况下：
never：点击按钮，键盘收起，但是Button的onPress没有直接执行
handled：点击按钮，键盘不会收起，Button的onPress直接执行，点击滚动区域的非按钮部分，键盘收起

4）overScrollMode：滚动到头，能否拉动 never(不能)/always(能)
5）scrollEnabled：是否可以滚动
6）contentOffset：初始默认滚动的位置 {y: 100}
7）showsVerticalScrollIndicator：滚动时，是否显示纵向滚动条
8）stickyHeaderIndices：第几个元素吸顶

9）指定滚动距离：ref.scrollTo({y: xxx})
10）指定滚动到结尾：ref.scrollToEnd()

<ScrollViewref={scrollViewRef}style={styles.root}contentContainerStyle={styles.containerStyle}keyboardDismissMode='on-drag'keyboardShouldPersistTaps='handled'onMomentumScrollBegin={() => {// console.log('滚动开始 ...')}}onMomentumScrollEnd={() => {// console.log('滚动结束 ...')}}onScroll={(event) => {// event.nativeEvent.contentOffset.y：滚动距离// console.log(event.nativeEvent.contentOffset.y);}}scrollEventThrottle={16} // ios, 没隔多少毫秒回调onScrolloverScrollMode='always' scrollEnabled={true}contentOffset={{ y: 100 }} // 初始滚动位置showsVerticalScrollIndicator={false}stickyHeaderIndices={[1]} // 第几个吸顶
>// 内容
</ScrollView>

11）pagingEnabled：是否整页滚动

<ScrollView style={{ width: '100%', height: 200 }} horizontal={true} pagingEnabled={true}><View style={{ width, height: 200, backgroundColor: 'red' }} /><View style={{ width, height: 200, backgroundColor: 'blue' }} /><View style={{ width, height: 200, backgroundColor: 'green' }} /></ScrollView>