React Native: изображение не отображается на виде

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

Я думаю, если вы используете, как это

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

это может быть работа.