Question

我希望在我编写的主屏幕组件中require()一个静态图像，我希望该图像是显示器的整个宽度（这也恰好是容器的整个宽度））同时保持纵横比。

这是我到目前为止所拥有的。主页组件：

import React, { Component } from "react";
import {
    StatusBar,
} from "react-native";

import Container from "../components/Container/Container";
import Header from "../components/Header/Header";
import FullWidthImage from "../components/Images/FullWidthImage";

export default class Home extends Component {
    render() {
        return (
            <Container>
                <FullWidthImage source={require("./lifting.jpg")}/>
                <Header/>
                <StatusBar translucent={false}/>
            </Container>
        );
    }
}

FullWidthImage组件：

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

import Proptypes from "prop-types";

export default class FullWidthImage extends Component {
    render() {
        return (
            <Image source={this.props.source} style={style.image} resizeMode="contain"/>
        );
    }
}

const style = StyleSheet.create({
    image: {
        flex: 1,
        width: "100%",
        borderColor: "red", borderWidth: 2,
    }
});

我已经尝试了一段时间并且在SO上寻找一个好的答案，但我找不到一个（例如，他们中的一些人假设你有一个uri并且没有使用require()）。非常感谢帮助！

Answer 1

您可以使用文档不太完整的库 resolveAssetSource 。

像这样：

import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View, 
  Dimensions,
} from 'react-native';
var resolveAssetSource = require('resolveAssetSource');
var imgSrc = resolveAssetSource(require('./200x150.png'));
console.log(imgSrc.width, imgSrc.height);
const SCREEN_WIDTH = Dimensions.get('window').width;
const IMAGE_RATIO = imgSrc.height/imgSrc.width; 
...
<Image source={imgSrc}  
style={{width:SCREEN_WIDTH, height:SCREEN_WIDTH*IMAGE_RATIO}}/>
...

重要的是：var imgSrc = resolveAssetSource(require('./200x150.png'));

我用这个问题来得到答案，然后我去尝试了; ） https://github.com/facebook/react-native/issues/4025

Answer 2

如果它是静态图像，您可以计算一次图像比率并保存。之后，您可以根据屏幕宽度缩放图像。例如：

import React, { Component } from "react";
import { View, Image, StyleSheet, Dimensons } from "react-native";

import Proptypes from "prop-types";

const SCREEN_WIDTH = Dimensons.get('window').width; 
const IMAGE_RAGIO = YOUR_STATIC_RATIO; 
export default class FullWidthImage extends Component {
    render() {
        return (
            <Image source={this.props.source} style={{ width: SCREEN_WIDTH, height: SCREEN_WIDTH * IMAGE_RAGIO }}/>
        );
    }
}

或者您可以使用getSize Function

计算图像尺寸

Answer 3

这是我最终做的事情：

我创建了以下组件

从“react”导入React，{Component}; 从“react-native”导入{View，Image，StyleSheet，Dimensions};

从“prop-types”导入Proptypes;

export default class FullWidthImage extends Component { static propTypes = { requireSource：Proptypes.number //实际上是一个require（some-url） };
```
render() {
    let image = this.props.requireSource;
    const { width, height } = Image.resolveAssetSource(image);
    const ratio = height / width;
    const SCREEN_WIDTH = Dimensions.get('window').width;

    return (
        <Image source={image} style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH*ratio}} resizeMode="contain"/>
    );
}
```
}
然后我在我的Home组件中使用它：

通过这种方式，我可以将要显示的图像显示在与该组件相同的文件夹中的组件中。

注意：此答案的格式似乎搞砸了，不知道如何修复它，我在代码段上尝试了ctrl+k。

Answer 4

使用resizeMode（https://facebook.github.io/react-native/docs/image.html#style）

resizeMode: "cover"

在您的代码中：

...

const style = StyleSheet.create({
    image: {
        flex: 1,
        width: "100%",
        borderColor: "red", borderWidth: 2,
        resizeMode: "cover"
    },
    container: {flex:1}
});

或尝试使用其他类型：包含，覆盖，拉伸，居中，重复。

React Native中具有宽高比的全宽图像

4 个答案: