React/native的Dimesnion在Android设备上无法正常工作

jm2pwxwz  于 2023-02-19  发布在  React
关注(0)|答案(3)|浏览(134)

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'}
/>
bmp9r5qi

bmp9r5qi1#

为我工作从react native导入difusion

const {height,width} = dimansion.get('window')

const Myfun=()=>{
    return(
      <View style={{flex:1}}>
         <View style={{height:height}}></View>
     </View>
          )
                }
i7uq4tfw

i7uq4tfw2#

实际上,您需要做的是创建一个状态变量并在其中分配尺寸值,然后在useEffect中创建一个侦听器,该侦听器将在您的设备每次旋转或设备尺寸发生变化时触发,示例如下:

const [dim, setDim] = useState(Dimensions.get('screen');
useEffect(() => {
const subscription = Dimensions.addEventListener(
  'change',
  ({ screen}) => {
    setDim({ screen});
  },
);
return () => subscription?.remove(); });

你可以使用dim.height为高度和dim.width为宽度在你想要的组件中
PS.我已经做了一个完整和全面的教程关于维度API如果你想检查出来,然后链接在下面(教程是在乌尔都语/印地语)https://www.youtube.com/watch?v=mISuyh_8-Cs&t=605s&ab_channel=LearnByDill

0ejtzxu1

0ejtzxu13#

我认为这是因为打印错误,您使用了Dimesnions而不是Dimensions。您可以获得设备的高度或宽度如下:

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;

相关问题