Image 反应本机图像高度（全宽）

我有一个图像，我从一个网址下拉。我不知道这个图像的尺寸提前

如何设置

的样式/布局，使其成为父视图的全宽，并计算高度，以保持纵横比

我曾尝试在0.34.0-rc.0中使用

onLoad

，在

event.nativeEvent.source中高度/宽度均为0

图像位于
中。我不想要全屏图像。
React Native内置了一个函数，可以返回图像的宽度和高度：
image.getSize（）
 我的使用非常相似，因为我需要显示一幅全屏宽度的图像，但保持其纵横比

根据@JasonGaare使用
Image.getSize（）
的答案，我提出了以下实现：

class PostItem extends React.Component {

  state = {
    imgWidth: 0,
    imgHeight: 0,
  }

  componentDidMount() {

    Image.getSize(this.props.imageUrl, (width, height) => {
      // calculate image width and height 
      const screenWidth = Dimensions.get('window').width
      const scaleFactor = width / screenWidth
      const imageHeight = height / scaleFactor
      this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
    })
  }

  render() {

    const {imgWidth, imgHeight} = this.state

    return (
      <View>
        <Image
          style={{width: imgWidth, height: imgHeight}}
          source={{uri: this.props.imageUrl}}
        />
        <Text style={styles.title}>
          {this.props.description}
        </Text>
      </View>
    )
  }
}

类positem扩展了React.Component{
状态={
imgWidth:0，
灯光：0，
}
componentDidMount（）{
Image.getSize（this.props.imageUrl，（宽度、高度）=>{
//计算图像宽度和高度
const screenWidth=Dimensions.get（'window'）.width
常数scaleFactor=宽度/屏幕宽度
常量imageHeight=高度/比例因子
this.setState（{imgWidth:screenWidth，imgHeight:imageHeight}）
})
}
render（）{
const{imgWidth，imgHeight}=this.state
返回(
{this.props.description}
)
}
}
如果您还无法解决此问题，请使用React Native v.0.42.0的resizeMode

<Image style={styles.intro_img} source={require('img.png')} 

这对我很有效

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

class Test extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
          style={{ height: 200, left: 0, right: 0 }}
          resizeMode="contain"
        />
        <Text style={{ textAlign: "center" }}>Papaya</Text>
      </View>
    );
  }
}

export default Test;

从“React”导入React
从“react native”导入{视图、文本、图像}
类测试扩展了React.Component{
render（）{
返回(
番木瓜
);
}
}
导出默认测试；

另一种方法是在布局事件之后获取父视图的宽度

<View 
  style={{ flex: 1}} 
  layout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
/>

{this.setState（{width:event.nativeEvent.layout.width}）；}
/>

从布局事件获取宽度父视图时，可以将宽度指定给图像标记

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

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 300,
      width: 0
    };
  }
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row'
      }}>
        <View style={{ width: 50, backgroundColor: '#f00' }} />
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fafafa' }}
          onLayout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
        >
          {
            this.state.width === 0 ? null : (
              <Image
                source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
                style={{ width: this.state.width, height: this.state.height }}
                resizeMode="contain"
              />
            )
          }
        </View>
      </View>
    );
  }
}
export default Card;

从“React”导入React；
从“react native”导入{View，Image}；
类卡扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
身高：300，
宽度：0
};
}
render（）{
返回(
{this.setState（{width:event.nativeEvent.layout.width}）；}
>
{
this.state.width==0？空：(
)
}
);
}
}
导出默认卡；
我是react native的新手，但我发现这个解决方案使用了一种简单的风格：

imageStyle: {
  height: 300,
  flex: 1,
  width: null}

我的1º应用程序中的图像全宽：


它对我很有用。
如果你有一个静态图像，你可以这样使用

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

class Test extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
          style={{ height: 200, left: 0, right: 0 }}
          resizeMode="contain"
        />
        <Text style={{ textAlign: "center" }}>Papaya</Text>
      </View>
    );
  }
}

export default Test;

import React, { Component } from "react";
import { View, Animated, Image, Dimensions } from "react-native";
import splashScreen from "../../../assets/imgs/splash-screen.png";

export default class MasterPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
      imgWidth: 0,
      imgHeight: 0
    };
  }
  checkLogIn = async () => {
    const width = 533; // set your local image with
    const height = 527; // set your local image height 
    // calculate image width and height
    const screenWidth = Dimensions.get("window").width;
    const scaleFactor = width / screenWidth;
    const imageHeight = height / scaleFactor;
    this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
  };

  async componentDidMount() {
    Animated.timing(
      // Animate over time
      this.state.fadeAnim, // The animated value to drive
      {
        toValue: 1, // Animate to opacity: 1 (opaque)
        duration: 800, // Make it take a while
        useNativeDriver: true
      }
    ).start(this.checkLogIn);
  }

  render() {
    const { imgWidth, imgHeight, fadeAnim } = this.state;
    return (
      <Animated.View
        style={{
          opacity: fadeAnim,
          backgroundColor: "#ebebeb",
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View>
          <Image
            source={splashScreen}
            style={{ width: imgWidth, height: imgHeight }}
          />
        </View>
      </Animated.View>
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{视图、动画、图像、尺寸}；
从“../../../assets/imgs/splashScreen.png”导入splashScreen；
导出默认类母版页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
fadeAnim:新的动画值（0），
imgWidth:0，
灯光：0
};
}
checkLogIn=async（）=>{
const width=533；//使用
const height=527；//设置本地图像高度
//计算图像宽度和高度
const screenWidth=维度.get（“窗口”）.width；
const scaleFactor=宽度/屏幕宽度；
常量imageHeight=高度/比例因子；
this.setState（{imgWidth:screenWidth，imgHeight:imageHeight}）；
};
异步组件didmount（）{
时间(
//随着时间的推移制作动画
this.state.fadeAnim，//要驱动的动画值
{
toValue:1，//动画设置为不透明度：1（不透明）
持续时间：800，//让它花点时间
useNativeDriver：真的吗
}
).start（此.checkLogIn）；
}
render（）{
const{imgWidth，imgHeight，fadeAnim}=this.state；
返回(
);
}
}
试试这个：
传递image
uri
和parentWidth（可以是
const{width}=Dimensions.get（“窗口”）；
）并瞧。。。您可以根据宽度和纵横比自动计算高度

import React, {Component} from 'react';
import FastImage from 'react-native-fast-image';

interface Props {
  uri: string;
  parentWidth: number;
}

interface State {
  calcImgHeight: number;
  width: number
  aspectRatio: number
}

export default class CustomFastImage extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      calcImgHeight: 0,
      width: props.parentWidth,
      aspectRatio: 1
    };
  }
  componentDidUpdate(prevProps: Props){
    const { aspectRatio, width }= this.state
    const { parentWidth} = this.props
   
    if( prevProps.parentWidth !== this.props.parentWidth){
        this.setState({
            calcImgHeight: aspectRatio * parentWidth,
            width: parentWidth
          })
    }
  }
  render() {
    const {calcImgHeight, width} = this.state;
    const {uri} = this.props;
    return (
      <FastImage
        style={{width: width, height: calcImgHeight}}
        source={{
          uri,
        }}
        resizeMode={FastImage.resizeMode.contain}
        onLoad={(evt) =>
          {
              this.setState({
            calcImgHeight: (evt.nativeEvent.height / evt.nativeEvent.width) * width, // By this, you keep the image ratio
            aspectRatio:  (evt.nativeEvent.height / evt.nativeEvent.width), 
          })}
        }
      />
    );
  }
}

import React，{Component}来自'React'；
从“反应本机快速图像”导入快速图像；
界面道具{
uri：字符串；
parentWidth：数字；
}
界面状态{
高度：数字；
宽度：数字
aspectRatio：数字
}
导出默认类CustomFastImage扩展组件{
建造师（道具：道具）{
超级（道具）；
此.state={
高度:0,，
宽度：props.parentWidth，
方面：1
};
}
componentDidUpdate（prevProps:Props）{
const{aspectRatio，width}=this.state
const{parentWidth}=this.props
if（prevProps.parentWidth！==this.props.parentWidth）{
这是我的国家({
calcImgHeight:aspectRatio*parentWidth，
宽度：parentWidth
})
}
}
render（）{
const{calcImgHeight，width}=this.state；
const{uri}=this.props；
返回(
{
这是我的国家({
calcImgHeight：（evt.nativeEvent.height/evt.nativeEvent.width）*width，//这样就可以保持图像的比例
aspectRatio:（evt.nativeEvent.height/evt.nativeEvent.width），
})}
}
/>
);
}
}
resizeMode:“cover”或“contain”？我无法在没有高度设置的情况下使用“cover”或“contain”。有什么想法吗？啊，有一件奇怪的事，把它们设为null，然后使用flex。。。我想你会在这里的某个地方找到你的答案：如果它是在滚动视图中，我认为这不起作用。我不是想要全屏图像。谢谢你的代码！我一直在使用组件react native fit图像，但在加载图像时遇到很多问题，有时无法呈现我对代码所做的唯一修改，因为图像的样式是