I am trying to create an Instagram like reel functionality in react-native app. I want to display a video element on entire screen available space. For the purpose of it I am using a FlatList. This code doesn't work on every device.
'const HomeScreen = ({navigation}) => { const dataArray=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
const renderItem=({item,index})=>{ return(
<View style={[{height:Dimesnions.get('window').height-bottomtabBarHeight,borderBottomColor:'black'},]}>
<Text>{item}</Text>
</View>
)
} return (
<SafeAreaView style={styles.container}>
<StatusBar />
<FlatList
data={dataArray}
renderItem={renderItem}
pagingEnabled
decelerationRate={'fast'}
/>
3条答案
按热度按时间bmp9r5qi1#
为我工作从react native导入difusion
i7uq4tfw2#
实际上,您需要做的是创建一个状态变量并在其中分配尺寸值,然后在useEffect中创建一个侦听器,该侦听器将在您的设备每次旋转或设备尺寸发生变化时触发,示例如下:
你可以使用dim.height为高度和dim.width为宽度在你想要的组件中
PS.我已经做了一个完整和全面的教程关于维度API如果你想检查出来,然后链接在下面(教程是在乌尔都语/印地语)https://www.youtube.com/watch?v=mISuyh_8-Cs&t=605s&ab_channel=LearnByDill
0ejtzxu13#
我认为这是因为打印错误,您使用了
Dimesnions
而不是Dimensions
。您可以获得设备的高度或宽度如下: