我正在嘗試渲染N個Flatlist組件并使它們完美地適合螢屏的其余部分，而無需滾動。這就是我的應用程式目前的樣子。
我有我的Flatlist孩子，它們是我在智能助手標題下方呈現的用例。flatlist對于 N 個用例，我需要組件完美地適合當前用戶螢屏。在這種情況下，還有很多空白空間，我希望N個孩子均勻地適應。
這是我的App.js檔案
return (
<View style = {styles.container}>
<Header appName='Intelligent Assistant'/>
<View >
<FlatList
data = {useCases}
renderItem = {({item}) => <Usecase useCase = {item} />}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex : 1 ,
paddingTop : 60,
},
});
這是我的 Usecase.js 檔案
const Usecase = ({useCase}) => {
return (
<TouchableOpacity style = {styles.useCase}>
<View style = {styles.useCaseView}>
<Text style = {styles.useCaseText}>{useCase.description}</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
useCase : {
padding : 15,
backgroundColor : '#f8f8f8',
borderBottomWidth : 1,
borderColor : '#eee',
},
useCaseView : {
flexDirection : 'column',
alignItems:'center',
justifyContent:'space-evenly',
},
});
uj5u.com熱心網友回復：
import {Dimensions} from ‘react-native’;
const deviceheight = Dimensions.get('window').height;
const Usecase = ({useCase}) => {
return (
<TouchableOpacity style = {[styles.useCase,{height: (deviceheight - YOUR_HEADER_BAR_HEIGHT)/useCases.length}]}>
<View style = {styles.useCaseView}>
<Text style = {styles.useCaseText}>{useCase.description}</Text>
</View>
</TouchableOpacity>
)
}
由于您使用的是{borderBottomWidth : 1}，因此您必須減去該高度計算中的行數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370789.html