Question

我试图设置反应原生的背景图片。我想要一个背景封面图片。我已经完成了以下

dps:
    <sw1>:
        dp_id: <value>
        interfaces:
            1:
                name: <value>
                native_vlan: <value>
            2:
                name: <value>
                native_vlan: <value>
    <sw2>:
        dp_id: <value>
        interfaces:
            1:
                name: <value>
                native_vlan: <value>
            2:
                name: <value>
                native_vlan: <value>

但是我得到了类似的东西

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>

Answer 2

您需要的是ImageBackground组件。

import {ImageBackground} from 'react-native';

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

应该这样做。

Answer 3

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 4

使用

<ImageBackground

source = {您的图片路径}>

如何在反应原生中设置背景图像？

4 个答案: