URI未显示在使用图像元素的React Native中

laawzig2  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(159)

我正在React-Native中开发一个显示NFT的应用程序。由于某种原因,这个URI在测试时没有显示在模拟器或我的手机上。
统一资源标识符:https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076
我的其他NFT显示正常,我也在显示图像之前检查错误,没有返回任何错误。我可以将URI输入到我的浏览器中,它显示正常,所以我不知道是什么导致了这个URI的问题。
下面是我的相关代码:

<Image
   style={styles.NFTImage}
   resizeMode={'cover'}
   source={{'uri': "https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076"}}
/>

const styles = StyleSheet.create({
    NFTOverlay: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        borderRadius: 25,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        zIndex: 98,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    NFTImage: {
        width: '100%',
        height: '100%',
        borderRadius: 25,
        aspectRatio: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
})

如上所述,我还有其他NFT(另外3个),它们都显示得很好,所以我想知道某些URI是否需要在React-Native中以不同的方式处理。

nhhxz33t

nhhxz33t1#

如果你在一个新的浏览器标签中打开你的图片link并检查它,你会发现它实际上是一个svg。在react-native-web中,图片组件可以完全正确地处理svg文件(see here)。
下面是我对react-native-svg-uri所做的一个尝试,它只是不呈现svg properly

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  useWindowDimensions,
} from 'react-native';
import Constants from 'expo-constants';
import SvgUri from 'react-native-svg-uri';
//  you will need to find a way to know when you are dealing with a svg
// e.g. does  the other url in like jpg/png?
const urls = [
  'https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076',
];

export default function App() {
  const [imageError, setImageError] = React.useState('');
  // limit image height to its parent container dimensions
  const [containerLayout, setContainerLayout] = React.useState({
    width: 400,
    height: 400,
  });
  const onContainerLayout = React.useCallback(({ nativeEvent }) => {
    setContainerLayout(nativeEvent.layout);
  }, []);
  // if you cant find a way to figure out if the image is svg before loading
  // then you will have to attempt to render it with the Image component,
  // and then on fails render it with SvgUri
  return (
    <View style={styles.container} onLayout={onContainerLayout}>
      {imageError && <Text>{imageError}</Text>}
      {imageError ? (
        <Image
          source={{
            uri: urls[0],
          }}
          style={styles.NFTImage}
          resizeMode="cover"
          onError={(error) => {
            console.log(error.nativeEvent.error);
            setImageError(error.nativeEvent.error);
          }}
        />
      ) : (
        <SvgUri
          source={{ uri: urls[0] }}
          // I dont know if this component accepts percentages
          width={containerLayout.width || "100%"}
          height={containerLayout.height || "100%"}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  NFTImage: {
    width: '100%',
    height: '100%',
    borderRadius: 25,
    aspectRatio: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

相关问题