Question

我有以下React Native组件，我试图在Android模拟器中显示一些文本和图像。

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

export default class ListItem extends React.Component {
    render() {
        return (
            <View>
                <Text> "Some text" </Text>
                <Image
                  source={{uri: "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"}}
                />
            </View>
        );
    }
}

文本正确显示但图像未显示。图片的uri是正确的。

知道可能是什么问题吗？

Answer 1

与静态资源不同，对于网络资源，您需要手动指定图像的尺寸。

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

有关图像资源的更多信息，请查看官方文档： https://facebook.github.io/react-native/docs/images.html#network-images

图像通过uri没有显示

1 个答案: