如何在React Native中将图像宽度设置为100％，高度自动调整？

Question

如何在React Native中将图像宽度设置为100％，高度自动调整？

113

我正在尝试在滚动视图中显示图像列表。宽度应为100％，而高度应为自动，保持长宽比。

我所查找的内容指向各种解决方案，这些方案提供全屏背景样式。

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

我尝试了各种不同的宽度组合，如null、高度：null、flex：1、alignSelf等。上述解决方案几乎可以使用，但是高度不是动态的，图像的某些部分无法显示。

- Prabhakar Bhat

请看一下react-native-scalable-image。 - Ihor Burlachenko

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sumukha hegde · Answer 1

这可能有助于自动调整图像的高度，使其具有100％的宽度。

图像：{ 宽度：“100％”，调整模式：“中心” “包含”，高度：未定义，纵横比：1， }

- Nitsan BenHanoch · Answer 2

我采用了Jon James的想法，并将其应用于图像本身，而不是图像的容器。这就是我最终使用的方法，它非常有效：

import { useState, useEffect } from 'react';
import { Image } from 'react-native';

export default function AutoHeightImage({ uri, style }) {
  const [paintedWidth, setPaintedWidth] = useState(0);
  const [resultHeight, setResultHeight] = useState(0);

  useEffect(() => {
    let stillMounted = true;
    Image.getSize(uri, (realW, realH) => {
      if (!paintedWidth || !stillMounted) return;
      const shrinkRatio = realW / paintedWidth;
      setResultHeight(realH / shrinkRatio);
    });
    return () => (stillMounted = false);
  }, [paintedWidth]);

  return (
    <Image
      style={[{ width: '100%' }, style, { height: resultHeight }]}
      source={{ uri }}
      onLayout={(event) => setPaintedWidth(event.nativeEvent.layout.width)}
    />
  );
}

- user19247721 · Answer 3

尝试使用 Image.getSize(uri, (width, height) => {console.log(width, height);});。

const Image = url => {
  const [aspectRatio, setAspectRatio] = useState(1.2);
  Image.getSize(
    url,
    (width, height) => {
      setAspectRatio(width / height);
    },
  );
  return (
    <Image
      source={{
        uri: url
      }}
      style={{width: '100%', aspectRatio: aspectRatio}}
      resizeMode="cover"
    />
  );
};

- Sumit Garai · Answer 4

function ImageX( props){
   const [state, setState] = React.useState({v:{height:1}});
   useEffect(() => {
    if(!props.source || !props.source.uri) return;
    Image.prefetch(props.source.uri)
    .then(() => {
        Image.getSize(props.source.uri, (width, height) => {
          let aspectRatio =  height/width;
          state.v.width=Dimensions.get('window').width;
          state.v.height=aspectRatio*state.v.width;
          setState({...state});
        });
    })
    .catch(error => console.log(error))
   },[props.source && props.source.uri]);
   
   if (state.v.height <=1) //Image not in cache (disk) yet
     {
      return (
        <Image {...props}/>
      );
   }
   else
   {
     let neededst={v:{width:state.v.width, height:state.v.height}}
     let st={v:props.style};
    assignObject(neededst, st);
     return (
       <Image {...props} style={neededst.v}/>
     );
   }
 }

 function assignObject(target, source) {
  if (!source) return;
  for (let k in target) {
    let v = target[k];
    if (Object(v) === Object) assignObject(v, source[k]);
    else {
      if (source[k]) {
        try {
          Object.assign(v, source[k]);
        } catch (e) {
          alert(e);
        }
      }
    }
  }

  for (let k in source) {
    if (!target[k]) {
      target[k] = source[k];
    }
  }

}

使用来自https://reactnativeelements.com/docs/image的Image组件