1. FlatList：一個高性能的列表組件
基礎(chǔ)使用：data酌呆、renderItem衡载、keyExtractor
ScrollView屬性：內(nèi)容容器、滾動條隙袁、滾動監(jiān)聽痰娱、鍵盤模式等
橫向縱向：horizontal
表頭：ListHeaderComponent
表尾：ListFooterComponent
空元素：ListEmptyComponent
分隔線元素：ItemSeparatorComponent
初始渲染元素：initialNumToRender
反向：inverted
多列排布：numColumns
可見元素回調(diào)：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}>暫無數(shù)據(jù)哦~</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：強中之強梨睁，多類型分組列表
基礎(chǔ)使用：sections、renderItem娜饵、keyExtractor
ScrollView屬性：內(nèi)容容器坡贺、滾動條、滾動監(jiān)聽、鍵盤模式等
表頭：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：實現(xiàn)不同樣式的彈窗
控制顯示：visible
渲染內(nèi)容：children
安卓返回關(guān)閉：onRequestClose
背景透明：transparent
狀態(tài)欄透明：statusBarTranslucent
動畫方式：animationType
狀態(tài)回調(diào)：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={() => {
//有問題，不回調(diào)
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：狀態(tài)欄適配的難題交我
內(nèi)容深淺模式：barStyle
背景顏色：backgroundColor
動畫切換：animated
透明懸腹恪：translucent
隱藏狀態(tài)欄：hidden
api：setBackgroundColor()万搔、setBarStyle()、setHidden()官帘、setTranslucent()
<StatusBar
barStyle={"dark-content"}
backgroundColor='white'
// animated={true}
// translucent={true}
hidden={false}
/>
6. Switch：開關(guān)切換瞬雹，一鍵搞定
指定開關(guān)：value
狀態(tài)回調(diào)：onValueChange
設(shè)置不可用：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'
}
})
