React Native：背景图像未填充整个应用程序答案

【问题标题】：React Native: Background Image not filling the entire appReact Native：背景图像未填充整个应用程序
【发布时间】：2020-04-30 15:30:21
【问题描述】：

我正在尝试让背景图片占据屏幕上的整个空间

从图片中可以看出，这似乎不起作用。我认为这可能与滚动视图有关，但不幸的是我无法弄清楚。

理想情况下希望使用弹性盒子作为解决方案。

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.container}>
            <ImageBackground
              source={require('./src/assets/foodflixIMG.jpg')}
              style={styles.image}>
              <Text style={styles.text}>Inside</Text>
            </ImageBackground>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'red',
    height: '100%',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  text: {
    color: 'grey',
    fontSize: 30,
    fontWeight: 'bold',
  }
});

export default App;

【问题讨论】：

尝试 resizeMode="cover"
没用，但感谢您的努力
图像已损坏。也许问题是因为图像被包裹在 SafeAreaView 中？
不幸的是，您的建议都没有奏效。图像非常好。我可以使用 px 增加图像大小，但我希望它根据移动设备大小自动增长。
我所说的“图像已损坏”的意思是我看不到任何图像，因为它在您的描述中已损坏。修复它

标签： css react-native flexbox

【解决方案1】：

检查您的代码，如下所示：

<ImageBackground 
            source={require('./assets/main.jpg')}
            style={{height:"100%", 
            width:"100%", flex:1}}
            > 
              <SafeAreaView>
              <ScrollView>
                <View style={styles.container}>
                 <Text>Hello</Text>
                </View>
              </ScrollView>
            </SafeAreaView>

           </ImageBackground>

希望这会有所帮助！

【讨论】：

我爱你哈哈我在这上面花了太长时间。感谢您的帮助，我真的很感激。
很高兴能帮到你。