Javascript 如何在react native中设置视图上的背景图像？

我正在尝试在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,
    },
});

但我得到的是这样的东西

您需要的是ImageBackgroundcomponent

从“react native”导入{ImageBackground}

应该可以了。

您需要的是ImageBackgroundcomponent

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;

从“react native”导入{ImageBackground}

应该这样做

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;

像这样试试。这对我很管用

像这样试试。这对我很管用

您可能需要在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>

您可能需要在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>

使用

source={您的图像路径}> 使用

source={您的图像路径}>

---

您是否尝试将scrollview组件嵌套在imagebackground组件中？否图像的实际大小即将显示。如果我不使用scrollview，那么我就看不到整个页面是否有图像。Do react支持backgroundReapeat属性，我尝试过，但没有用..您可以参考这里您是否尝试将scrollview组件嵌套在imagebackground组件中？没有图像的实际大小。如果我不使用scrollview，那么我看不到整个页面上是否有图像。Do react支持backgroundReapeat属性，我尝试过，但没有用..您可以在这里参考