如何在React Native中设置背景图像超过视图？

Question

我正在尝试在react native中设置背景图像。我想要背景封面图像。我已经完成了如下

<ScrollView>
    <View>
        <Image source={ require('../Images/5.jpg') } style = { styles.image } />
            {
                this.state.details.map(a =>
                    <View>
                        <Text style={ styles.textStyle } > { a.content = a.content.replace(regex, '') } < /Text>
                        < RadioForm style= {{ width: 350 - 30 }} outerColor = "#080103" innerColor = "#FF5733" itemShowKey = "label" itemRealKey = "item" dataSource = { transform(a.options) } onPress = {(item)=>this._onSelect(item)}/>
                    </View>)
            }
    </View>
</ScrollView>

const styles = StyleSheet.create({
    image: {
        flex: 1,
        resizeMode: 'cover',
        position: 'absolute',
        width: "100%",
        flexDirection: 'column'
    },
    textStyle: {
        fontSize: 16,
        color: '#000',
        padding: 5,
    },
});

但是我得到这样的东西

Answer 1

您可能需要添加ImageBackground外部内容，ScrollView并确保flex将其传递给ImageBackground style'

例如

<View style={{flex: 1}}>
        <ImageBackground
          resizeMode={'stretch'} // or cover
          style={{flex: 1}} // must be passed from the parent, the number may vary depending upon your screen size
          source={require('/*Your Image Path*/')}
        >
          <ScrollView>
            {/*Render the children here*/}
          </ScrollView>
        </ImageBackground>
      </View>