如何在本机反应中设置背景图像？

Question

我正在尝试在 React 中设置背景图片 native.I 想要背景封面图片。我已经像下面那样做了

<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组件。

import {ImageBackground} from 'react-native';

 <ImageBackground
                source={require('./pathToYourImage.png')}
                style={yourCustomStyle}>
</ImageBackground>

应该可以了。

Answer 2

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { WINDOW } from '../assets/config.js';

class Splash extends React.Component{
    render(){
        return(
            <View style={styles.splashContainer}>
                <Image
                  style={styles.bgImage}
                  source={require('../assets/images/splash.jpg')}
                />
            </View>
        )       
    }
}

const styles = StyleSheet.create({
  splashContainer: {
    flex: 1
  },
  bgImage: {
    flex: 1,
    width: WINDOW.width,
    height: WINDOW.height,
  }
});

export default Splash;

这样试试。这对我来说很好。

Answer 3

您可能需要在 ScrollView 之外添加 ImageBackground 并确保将 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>

Answer 4

使用

<ImageBackground

source={你的图片路径}>

如何在本机反应中设置背景图像？

How to set background image over view in react native?

javascript

background-image

jsx

react-native