Question

对不起，如果我要重新发布一个问题，但是找不到一个可以解释这个问题的人。

我的render（）函数在我的React Native应用程序中返回它。

<View style={styles.login_card_view}>

    <Text>aaa</Text>
    <Image source={require('./logo_full.png')} style={{width: 200, height: 40}}/>
    <Text>bbb</Text>

    <Card>
        ...
    </Card>

    <Button containerStyle={{ marginTop: 20, alignItems: 'center', flex: 1}} />
</View>

这只会导致图像空白。（图像与我的班级组件放在同一位置。）在该空间中没有显示图像，但是我的两个文本“ aaa”和“ bbb”相差40。（这是图像的给定高度。）

我使用Image组件错误吗？这与文档完全相似。任何帮助表示赞赏！谢谢。

Answer 1

<View style={{flex:1}}>
    <Image style={{resizeMode: 'cover',width: 200, height: 40}} source={require('./logo_full.png')}/>
</View>

确保图像来源正确

Answer 2

import {View,StyleSheet, Text , Button , Image} from 'react-native';
import React , {Component} from 'react';
export default class BasicExample extends React.Component{
    render (){
        return (
            <View>
                <Text>aaa</Text>
                <Image source={require('./logo_full.png')} style={{width: 200, height:   40}}/>
                <Text>bbb</Text>
            </View>
        )
    }

  }

我运行这段代码，它对我有用。请记住正确放置图像的位置和名称。您的代码可能有错误，例如没有按钮标题。

Answer 3

我想如果你这样使用

{{1}}

可以。

React Native：图像未在视图中显示

3 个答案: