一、FlatList组件
1)data:渲染数据源,数组
2)renderItem:渲染ui函数
3)keyExtractor:生成唯一key的函数
4)contentContainerStyle:包裹内容的容器的样式
5)showsVerticalScrollIndicator:滚动时,是否显示纵向滚动条
6)onScroll:滚动回调
7)keyboardDismissMode: 当键盘拉起时,滚动键盘是否消失 on-drag(消失)
8)keyboardShouldPersistTaps:当键盘拉起时,点击滚动区域键盘是否消失 never(消失)/always(不消失)/handled(消失)
!!!never和handled的区别:**键盘和Button同时存在的情况下:
never:点击按钮,键盘收起,但是Button的onPress没有直接执行
handled:点击按钮,键盘不会收起,Button的onPress直接执行,点击滚动区域的非按钮部分,键盘收起
9)horizontal:是否横向
10)ListHeaderComponent:列表头部组件
11)ListFooterComponent:列表尾部组件
12)ItemSeparatorComponent:每个item的分隔组件
13)initialNumToRender:初始化第一屏渲染几个
14)inverted:是否顺序反向渲染
15)onViewableItemsChanged:获取可视区域的item列表
16)滚动到指定index的item: ref.scrollToIndex({index: xx, ...})
17)滚动到指定的item:ref.scrollToItem({item: xx, ...}) ---- 不推荐
18)滚动到指定的像素:ref.scrollToOffset({offset: xx})
18)滚动到底部:ref.scrollToEnd()
javascript
useEffect(() => {
setTimeout(() => {
// flatListRef.current.scrollToIndex({
// index: 10,
// viewPosition: 0.5, // index的item滚动到的位置 0-顶部 0.5-中间 1-底部
// animated: true,
// });
// flatListRef.current.scrollToItem({
// item: 5,
// viewPosition: 0,
// animated: true,
// });
// flatListRef.current.scrollToOffset({
// offset: 200,
// });
flatListRef.current.scrollToEnd({
animated: true,
});
}, 2000);
}, []);
const renderItem = ({ item, index }) => {
return (
<Text style={styles.txt}>{`List item ${item}`}</Text>
);
}
return (
// ...
<FlatList
ref={flatListRef}
style={styles.flatlist}
data={data}
renderItem={renderItem}
keyExtractor={(_, index) => `item-${index}`} // (item, index)中的item没有用到但不能删时,可写成---
contentContainerStyle={styles.containerStyle}
showsVerticalScrollIndicator={false}
onScroll={(event) => {
console.log(event.nativeEvent.contentOffset.y);
}}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps='handled'
ListHeaderComponent={
<View style={styles.header}>
<Text style={styles.extraTxt}>列表头部</Text>
</View>
}
ListFooterComponent={
<View style={[styles.header, styles.footer]}>
<Text style={styles.extraTxt}>列表尾部</Text>
</View>
}
ListEmptyComponent={
<View style={styles.listEmpty}>
<Text style={styles.extraTxt}>暂无数据~</Text>
</View>
}
ItemSeparatorComponent={
<View style={styles.separator} />
}
initialNumToRender={15}
inverted={false}
// numColumns={2}
// onViewableItemsChanged={(info) => {
// const { viewableItems } = info;
// console.log(viewableItems);
// }}
/>
)
19)ListEmptyComponent:暂无数据时的组件
20)numColumns:一行显示几个item
二、SectionList组件
1)sections:数据源 {data: [xx,xx,xx]}[]
2)renderItem:渲染item函数
3)keyExtractor:生成唯一key函数
4)contentContainerStyle:包裹内容的容器的样式
5)showsVerticalScrollIndicator:滚动时,是否显示纵向滚动条
6)onScroll:滚动回调
7)keyboardDismissMode: 当键盘拉起时,滚动键盘是否消失 on-drag(消失)
8)keyboardShouldPersistTaps:同FlatList组件
9)ListHeaderComponent:列表头部组件
10)ListFooterComponent:列表尾部组件
11)renderSectionHeader:每个section的头部组件
12)ItemSeparatorComponent:item分隔组件
13)stickySectionHeadersEnabled:section头部是否吸顶
14)指定滚动到的位置:ref.scrollToLocation({sectionIndex: xx, itemIndex: xx, ...})
注意:itemIndex
javascript
export const SectionData = [
{type: 'A', data: ['安达', '安宁', '安吉', '安家', '安可', '安庆', '阿尔山', '阿成被', ]},
{type: 'B', data: ['北京北', '北京东', '北京', '北京南', '滨江', '北京朝阳', ]},
{type: 'C', data: ['重庆', '重庆北', '重庆东', '长春', '长春南', '长春西', '成都', '成都东', ]},
{type: 'D', data: ['大成', '大元', '东方', '丹东', '大网坛', ]},
{type: 'F', data: ['福州', '福州南', '福建', '复旦', ]},
{type: 'G', data: ['贵阳', '贵阳东', '广州', '广东', '广州东', '广东北', ]},
{type: 'H', data: ['哈尔滨', '哈尔滨北', '合肥', '海口', '黄海', '杭州', '呼和浩特', ]},
];
useEffect(() => {
setTimeout(() => {
// sectionListRef.current.scrollToLocation({
// sectionIndex: 1, // 哪一组
// itemIndex: 4, // 组中的哪个item,注意:会把section头算在里面
// viewPosition: 0, // 滚动到的位置
// animated: true,
// });
}, 2000);
}, []);
const renderItem = ({item, index, section}) => {
return (
<Text style={styles.txt}>{item}</Text>
);
};
const renderSectionHeader = ({section}) => {
return (
<Text style={styles.sectionHeaderTxt}>{section.type}</Text>
);
}
return (
// ...
<SectionList
ref={sectionListRef}
style={styles.sectionList}
sections={SectionData}
renderItem={renderItem}
keyExtractor={(item, index) => `${item}-${index}`}
contentContainerStyle={styles.containerStyle}
showsVerticalScrollIndicator={false}
onScroll={(event) => {
// console.log(event.nativeEvent.contentOffset.y);
}}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps='handled'
ListHeaderComponent={
<View style={styles.header}>
<Text style={styles.extraTxt}>列表头部</Text>
</View>
}
ListFooterComponent={
<View style={[styles.header, styles.footer]}>
<Text style={styles.extraTxt}>列表尾部</Text>
</View>
}
renderSectionHeader={renderSectionHeader}
ItemSeparatorComponent={() =>
<View style={styles.separator} />
}
stickySectionHeadersEnabled={true}
/>
)

上拉加载----列表组件的属性
1)onEndReached:加载数据函数
2)onEndReachedThreshold:距离底部多少距离触发 0-1
三、RefreshControl下拉刷新组件
1)需要和列表的refreshControl配合使用
2)SectionList,FlatList,ScrollView都可以用
javascript
const [refreshing, setRefreshing] = useState(false);
// ...
<SectionList
// ....忽略
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => {
console.log('加载...');
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 1000);
}}
/>
}
onEndReached={() => {
console.log('加载数据...');
}}
onEndReachedThreshold={0.2} // 距离底部多少距离触发
/>
四、Modal组件
1)visible:是否显示弹窗
2)onRequestClose:关闭弹窗函数
3)transparent:背景是否透明
4)statusBarTranslucent:状态栏是否透明
5)animationType:动画方式 none/fade/slide
6)onShow:弹窗显示回调
javascript
const [visible, setVisible] = useState(true);
// ...
<Button title='按钮' onPress={() => setVisible(true)} />
<Modal
visible={visible}
onRequestClose={() => setVisible(false)}
transparent={true}
statusBarTranslucent={true}
animationType='slide'
onShow={() => console.log('显示...')}
>
<View style={styles.bg} />
<View style={styles.box}>
<Text style={styles.txt}>我是内容</Text>
</View>
</Modal>

五、StatusBar组件 - 调整状态栏
1)barStyle:状态栏上的内容的色系 dark-content(黑)/light-content(白)
2)backgroundColor:背景颜色 transparent/white/颜色值
3)translucent:是否透明悬浮
4)hidden:是否隐藏状态栏
javascript
<StatusBar
barStyle='dark-content'
backgroundColor='transparent'
translucent={true}
hidden={true}
/>
六、Switch组件
1)value:指定开关值
2)onValueChange:开关状态回调
3)disabled:是否可切换
4)trackColor:开/关下的背景色 {true: xx, false: xxx}
5)thumbColor:前景颜色
javascript
const [switchValue, setSwitchValue] = useState(true);
// ...
<Switch
value={switchValue}
onValueChange={(value) => {
setSwitchValue(value);
}}
// disabled={false}
trackColor={{ true: 'red', false: 'green' }}
thumbColor='blue' />
