无法获取背景图像以使用React-Native和NativeBase

Question

我试图使用NativeBase与ReactNative并将图片作为背景。我已经谷歌搜索了一段时间，这里是我提出的代码：

export default class WelcomeScreen extends Component {
    render(){
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                </Header>
                <Content>
                    <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
                    <Text>Do you ever feel like you dont have a partner</Text>
                </Content>
            </Container>
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

问题是这会使图像拉伸很多，因此在模拟器中无法识别。这是模拟器中与实际图像相比的图片：

这是实际的图像：

我该如何解决？

Answer 1

我有两个解决方案：

1. NativeBase Content组件是React Native ScrollView的包装。与ScrollView一起使用时的图像使得必须包括图像的高度和宽度。
2. 如果要排除提及图像的尺寸，请使用View代替Content。

<View>
  <Image
     source={testImage}
     style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }}
  />
  <Text>Do you ever feel like you dont have a partner</Text>
</View>

Answer 2

您可以更改图像的HEIGHT和WIDTH以使其进入视图端口，为此您可以使用react-native的Dimensions API。有关更多详细信息，请阅读此react-native doc for Dimensions API。

import { Text, View, Dimensions } from 'react-native';

export default class WelcomeScreen extends Component {
render(){
    let {height, width} = Dimensions.get('window');
    return (
        <Container>
            <Header>
                <Button transparent>
                    <Icon name='ios-arrow-back' />
                </Button>
            </Header>
            <Content>
                <Image source={require('../images/telula_upclose.jpeg')}  
                   style={[styles.backgroundImage, {height:height, width: width}]} />
                <Text>Do you ever feel like you dont have a partner</Text>
            </Content>
        </Container>
    );
  }
}

let styles = StyleSheet.create({
  backgroundImage: {
  flex: 1,
  backgroundColor:'transparent',
  justifyContent: 'center',
  alignItems: 'center',
 }
});

如果您希望文本覆盖背景图像，则将其包装在<Image>组件中。

<Image>
   <View>
     <Text>Hello!! </Text>
   </View>
</Image>

Answer 3

这是一个组件：

import {
  Dimensions,
  Image,
} from 'react-native'
import React from 'react'

const BackgroundImage = (props) => {
  const window = Dimensions.get('window')
  const height = props.height || window.height
  const width = window.width
  const resizeMode = props.resizeMode || 'cover' // cover
  return (
    <Image
      style={[props.styles, {height: height - props.headerSize, width: null, resizeMode: resizeMode }]}
      opacity={1}
      source={props.uri ? {uri: props.uri} : props.source}
    >
      {props.children}
    </Image>
  )
}

export default BackgroundImage

Answer 4

您可以使用Dimension获取大小屏幕并调整图像大小：

1-导入尺寸：

import { View, Text, Dimensions } from 'react-native'

2-在组件中获取对象窗口中的硬件大小

const window = Dimensions.get('window');

3-为你的Image增加了一个维度

<Image
     style={{width: window.width, height: window.height}}
     source={require('../images/telula_upclose.jpeg')}
/>

警告：您的图像可能会变形。在图像中使用'resizeMode'道具

您可以查看此信息以获取更多信息：documentation for Image and resizeMode

Answer 5

使用完全设计用于渲染背景图像的react-native ImageBackground组件

Answer 6

你可以在flex: 1元素上使用<Image>样式，让它填满整个屏幕。然后，您可以使用图像调整大小模式之一使图像完全填充元素：

<Image style={style.backgroundImage} source={require('../../assets/images/bg.png')}  />

零件：

import React from 'react';
import { View, StyleSheet, Image } from 'react-native';

class ReactBGImg extends React.Component {
    render() {
        return (
            <Image style={style.backgroundImage} source={require('../../assets/images/bg.png')}  />
            <View style={style.backgroundTransperant}>
                <Text>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tristique ligula, quis tristique justo. Cras dictum est libero, eget pretium nunc vestibulum sit amet.
                </Text>
            </View>
        )
    }
}

const style = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover',
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
    }
    backgroundTransperant: {
        backgroundColor: 'transparent'
    }
});

希望它对你有所帮助！