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

我有两个解决方案：

NativeBase Content组件是React Native ScrollView的包装器。与ScrollView一起使用时的图像使得必须包括图像的高度和宽度。
如果您要排除提及图片的尺寸，请使用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

您可以更改图像的高度和宽度以使其进入视图端口，为此您可以使用react-native的Dimensions API。有关详细信息，请阅读此preg_match()。

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

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

组件中的

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

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

3-为你的形象添加了一个维度

<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'
    }
});

希望对您有帮助！

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

6 个答案: