React Native 中具有纵横比的全宽图像

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

这是我最终所做的：

1. 我创建了以下组件

   从"反应"导入反应，{组件};从"反应原生"导入 { 视图、图像、样式表、尺寸 };

   从"道具类型"导入道具类型;

   导出默认类 全宽图像扩展组件 { 静态属性类型 = { 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"/>
       );
   }
   

   }

2. 然后我在我的 Home 组件中使用它，如下所示：

这样，我可以将要显示的图像显示在与该组件相同的文件夹中的组件中。

注意：这个答案的格式似乎搞砸了，不知道怎么解决，我试ctrl+k代码片段。

Answer 2

您可以使用文档不太完善的库 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 3

使用调整大小模式 (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}
});

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