React Native: фоновое изображение не заполняет все приложение

Question

Я пытаюсь заставить фоновое изображение занимать все пространство на экране [! [Введите описание изображения здесь] [1]] [1]

Как видно из изображения, это делает не похоже на работу. Я думаю, что это может быть связано с представлением прокрутки, но, к сожалению, я не могу понять это.

В идеале хочу использовать flex box для решения.

  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;```


  [1]: https://i.stack.imgur.com/mOmF5.png

Answer 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>

Надеюсь, это поможет!