无法使 React Native 背景全屏答案

【问题标题】：Trouble making React Native background full screen无法使 React Native 背景全屏
【发布时间】：2021-01-20 18:03:09
【问题描述】：

我正在使用Expo iOS模拟器，一直在尝试让后台全屏，但无法正常工作。

export default function App() {
  return (
        <ScrollView >
        <View  style={[styles.container]}>
          <Text style={styles.title}>Mt. Fuji</Text>
          <Image source={require('./images/pic.jpeg')} style={styles.uriImg}/>
          <TextImg imageUri={'https://m.media-amazon.com/images/M/MV5BZjRjOTFkOTktZWUzMi00YzMyLThkMmYtMjEwNmQyNzliYTNmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ@._V1_.jpg'} text='Rick & Morty'  style={[styles.text, styles.propImg]} /> 
          <TextImg text='The Butterfly Nebula' imageUri={'https://www.dualdove.com/wp-content/uploads/2020/02/supernova-dying-star-in-the-shape-of-a-butterfly.jpg'} style={[styles.text, styles.propImg]} /> 
        </View> 
      </ScrollView>
  )
};

const styles = StyleSheet.create({
  uriImg: {
    width: 350, 
    height: 200,
    top:110,
  }, 
  propImg: {
    width: 350, 
    height: 200
  }, 
  container:{
    backgroundColor: '#a1c5ff',
    alignItems: 'center',
    flex:1
  });

这就是现在的样子。

【问题讨论】：

标签： css ios reactjs react-native react-props

【解决方案1】：

你可以从'react-native'导入'Dimensions'，如下图：

import { Dimensions } from 'react-native';

您现在可以从以下获取屏幕宽度和高度：

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

一旦定义了这些值，您现在可以将容器的宽度和高度设置为以下值：

container: {
  width: width
  height: height
}

【讨论】：