javascript - 如何在 native react 中设置背景图像？

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

您可能需要在 ScrollView 之外添加 ImageBackground 并确保将 flex 传递给 ImageBackground 样式'

例如

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