1. FlatList：一个高性能的列表组件
基础使用：data、renderItem、keyExtractor
ScrollView属性：内容容器、滚动条、滚动监听、键盘模式等
横向纵向：horizontal
表头：ListHeaderComponent
表尾：ListFooterComponent
空元素：ListEmptyComponent
分隔线元素：ItemSeparatorComponent
初始渲染元素：initialNumToRender
反向：inverted
多列排布：numColumns
可见元素回调：onViewableItemsChanged
滚动到指定元素：scrollToIndex()、scrollToItem() 不推荐
滚动指定距离：scrollToOffset()
滚动到底：scrollToEnd()
FlatListDemo.js
import { useEffect, useRef } from "react";
import { Text, View, StyleSheet, FlatList } from "react-native";
const data = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
]
export default () => {
const flastRef = useRef(null);
useEffect(() => {
setTimeout(() => {
flastRef.current.scrollToIndex({
index: 15,
viewPosition: 1, //0表示顶部，1表示底部
animated: true
});
}, 2000)
})
const renderItem = ({item, index}) => {
return (
<Text style={styles.txt}>{`List item ${item}`}</Text>
);
};
const ListHeader = (
<View>
<Text style={styles.txt}>Flast List header</Text>
</View>
);
const ListFooter = (
<View>
<Text style={styles.txt}>Flast List Footer</Text>
</View>
);
const ListEmpty = (
<Text style={styles.listEmpty}>暂无数据哦~</Text>
);
const ItemSeparator = (
<View style={styles.divider}></View>
);
return(
<FlatList
ref={flastRef}
style={styles.root}
data={data}
// data={[]}
renderItem={renderItem}
keyExtractor={(item, index) => `item-${index}` }
ListHeaderComponent={ListHeader}
ListFooterComponent={ListFooter}
ListEmptyComponent={ListEmpty}
ItemSeparatorComponent={ItemSeparator}
initialNumToRender={15}
// inverted={true}
// numColumns={2}
onViewableItemsChanged={(info) => {
const {viewableItems} = info;
console.log(viewableItems);
}}
>
</FlatList>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
txt: {
fontSize: 20,
fontWeight: 'bold',
margin: 20
},
listEmpty: {
width: '100%',
height: 500,
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'center'
},
divider: {
width: '100%',
height: 0.5,
backgroundColor: '#dedede',
},
});
2. SectionList：强中之强，多类型分组列表
基础使用：sections、renderItem、keyExtractor
ScrollView属性：内容容器、滚动条、滚动监听、键盘模式等
表头：ListHeaderComponent
表尾：ListFooterComponent
分组头部：renderSectionHeader
分割线元素：ItemSeparatorComponent
分组吸顶：stickySectionHeadersEnabled
滚动api：scrollToLocation()
import { View, StyleSheet, SectionList, Text } from "react-native"
import { SectionData } from "../constants/Data";
import { useEffect, useRef } from "react";
export default () => {
const renderItem = ({item, index, section}) => {
return (
<Text style={styles.txt}>{item}</Text>
);
};
const renderSectionHeader = ({section}) => {
return (
<Text style={styles.sectionHeader}>{section.type}</Text>
);
};
const sectionListRef = useRef(null);
useEffect(() => {
setTimeout(() => {
sectionListRef.current.scrollToLocation({
sectionIndex: 1,
itemIndex: 2,
// viewPosition: 0,
});
}, 2000);
}, []);
return (
<SectionList
ref={sectionListRef}
style={styles.root}
sections={SectionData}
renderItem={renderItem}
keyExtractor={(item, index) => `item-${index}`}
renderSectionHeader={renderSectionHeader}
stickySectionHeadersEnabled={true}
>
</SectionList>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
txt: {
fontSize: 20,
height: 56,
width: '100%',
color: "#333",
textAlignVertical: 'center',
textAlign: 'center'
},
sectionHeader: {
width: '100%',
height: 36,
backgroundColor: 'red',
textAlign: 'center',
fontSize: 22,
}
});
3. RefreshControl：下拉刷新，上拉加载，用我没错
下拉刷新：refreshing、onRefresh
上拉加载：onEndReached、onEndReachedThreshold
import { View, StyleSheet, SectionList, Text, RefreshControl } from "react-native"
import { SectionData } from "../constants/Data";
import { useEffect, useRef, useState } from "react";
export default () => {
const renderItem = ({item, index, section}) => {
return (
<Text style={styles.txt}>{item}</Text>
);
};
const renderSectionHeader = ({section}) => {
return (
<Text style={styles.sectionHeader}>{section.type}</Text>
);
};
const sectionListRef = useRef(null);
const [refreshing, setRefreshing] = useState(false)
// useEffect(() => {
// setTimeout(() => {
// sectionListRef.current.scrollToLocation({
// sectionIndex: 1,
// itemIndex: 2,
// // viewPosition: 0,
// });
// }, 2000);
// }, []);
return (
<SectionList
ref={sectionListRef}
style={styles.root}
sections={SectionData}
renderItem={renderItem}
keyExtractor={(item, index) => `item-${index}`}
renderSectionHeader={renderSectionHeader}
stickySectionHeadersEnabled={true}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => {
console.log("onRefresh...");
setRefreshing(true);
//request new data
setTimeout(() => {
setRefreshing(false);
}, 2000)
}}
>
</RefreshControl>
}
onEndReached={() => {
console.log('onEndReached...')
}}
onEndReachedThreshold={0.3}
>
</SectionList>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
txt: {
fontSize: 20,
height: 56,
width: '100%',
color: "#333",
textAlignVertical: 'center',
textAlign: 'center'
},
sectionHeader: {
width: '100%',
height: 36,
backgroundColor: 'red',
textAlign: 'center',
fontSize: 22,
}
});
4. Modal：实现不同样式的弹窗
控制显示：visible
渲染内容：children
安卓返回关闭：onRequestClose
背景透明：transparent
状态栏透明：statusBarTranslucent
动画方式：animationType
状态回调：onShow、onDismiss
背景动画：伏笔
ModalDemo.js
import { View, StyleSheet, Modal, Text, SectionList, Button, Image, TouchableOpacity } from "react-native"
import { SectionData } from "../constants/Data";
import { useRef, useState } from "react";
import close from "../assets/images/icon_close_modal.png"
export default () => {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
}
const hideModal = () => {
setVisible(false);
}
const renderItem = ({ item, index, section }) => {
return (
<Text style={styles.txt}>{item}</Text>
);
};
const renderSectionHeader = ({ section }) => {
return (
<View style={styles.sectionHeader}>
<Text style={styles.sectionHeader}>{section.type}</Text>
</View>
);
};
const listHeader = () => {
return (
<View style={styles.listHeader}>
<Text style={styles.listHeader}>
列表头部
</Text>
<TouchableOpacity
style={styles.iconButton}
onPress={() => {
hideModal()
}}
>
<Image
source={close}
style={styles.icon}
/>
</TouchableOpacity>
</View>
);
}
return (
<View style={styles.root}>
<Button title="按钮" onPress={() => {
showModal();
}} />
<Modal
visible={visible}
onRequestClose={() => {
hideModal();
}}
transparent={true}
// statusBarTranslucent={true}
animationType="slide"
onShow={() => {
console.log('onShow...')
}}
onDismiss={() => {
//有问题，不回调
console.log('onDismiss...')
}}
>
<View style={styles.blank}></View>
<View style={styles.content}>
<SectionList
style={styles.sectionList}
sections={SectionData}
renderItem={renderItem}
keyExtractor={(item, index) => `item-${index}`}
renderSectionHeader={renderSectionHeader}
stickySectionHeadersEnabled={true}
ListHeaderComponent={listHeader}
>
</SectionList>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
padding: 20,
},
content: {
width: '100%',
height: '90%',
backgroundColor: "#ff000030"
},
sectionList: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0',
},
txt: {
fontSize: 20,
height: 56,
width: '100%',
color: "#333",
textAlignVertical: 'center',
textAlign: 'center'
},
sectionHeader: {
width: '100%',
height: 36,
backgroundColor: 'red',
textAlign: 'center',
fontSize: 22,
justifyContent: 'center'
},
blank: {
width: '100%',
height: '10%',
backgroundColor: '#00000050'
},
icon: {
width: 24,
height: 24,
},
iconButton: {
// width: 24,
// height: 24,
position: 'absolute',
right: 16
},
listHeader: {
width: '100%',
height: 36,
backgroundColor: 'yellow',
textAlign: 'center',
fontSize: 22,
justifyContent: 'center',
textAlignVertical: 'center'
},
})
5. StatusBar：状态栏适配的难题交我
内容深浅模式：barStyle
背景颜色：backgroundColor
动画切换：animated
透明悬浮：translucent
隐藏状态栏：hidden
api：setBackgroundColor()、setBarStyle()、setHidden()、setTranslucent()
<StatusBar
barStyle={"dark-content"}
backgroundColor='white'
// animated={true}
// translucent={true}
hidden={false}
/>
6. Switch：开关切换，一键搞定
指定开关：value
状态回调：onValueChange
设置不可用：disabled
背景颜色：trackColor
前景颜色：thumbColor
import { useState } from "react";
import { View, StyleSheet, Switch } from "react-native"
export default()=> {
const [switchValue, setSwitchValue] = useState(false);
return (
<View style={styles.root}>
<Switch
value={switchValue}
onValueChange={(value) => {
console.log(`value: ${value}`)
setSwitchValue(value);
}}
// disabled={true}
trackColor={{true: 'red', false: 'yellow'}}
thumbColor='#0f0'
/>
</View>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0'
}
})
