6

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

问题是这会极大地拉伸图像，使其在模拟器中无法识别。这是模拟器中与实际图像相比的图片：

模拟器图像

这是实际的图像：

实际图片

我该如何解决？

4

6 回答 6

5

我有两个解决方案：

  1. NativeBase内容组件是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>
于 2016-09-28T10:52:08.797 回答
2

这是一个执行此操作的组件：

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
于 2016-12-03T14:06:40.683 回答
2

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

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>
于 2016-09-27T18:54:12.503 回答
0

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

希望它对你有帮助！

于 2019-03-28T18:08:32.267 回答
0

使用专为渲染背景图像而设计的 react-native ImageBackground组件

于 2019-02-23T16:46:21.630 回答
0

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

1-进口维度：

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”道具

您可以查看以下内容以获取更多信息：Image 和 resizeMode 的文档

于 2016-09-27T17:04:45.143 回答