Добавь img ввиду реагируй родной

Question

Я попытаюсь получить панель с бесплатным img.

У меня есть глобальное представление, которое содержит

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

class Search extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: "./images/images1.jpg" }} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: "./images/images2.jpg" }} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: "./images/images3.jpg" }} />
                </View>
            </View>
        )
    }
}
export default Search

Моя проблема, когда я вызываю в моем контроллере компонент:

import React from 'react';
import Search from './Components/Search'

export default function App() {
    return (
        <Search />
    );
}

Мое изображение не отображается на моем экране. У меня только белый экран.

Что не так в моем коде, чтобы показать мои изображения?

Answer 1

Попробуйте изменить свой код следующим образом:

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

class Search extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={require('./images/images1.jpg')} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                <Image source={require('./images/images2.jpg')} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                <Image source={require('./images/images3.jpg')} />
                </View>
            </View>
        )
    }
}
export default Search

Надеюсь, это поможет!

Answer 2

Вам необходимо получить изображение.

class Search extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: require("./images/images1.jpg") }} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: require("./images/images2.jpg") }} />
                </View>
                <View style={{ flex: 1, height: 335 }}>
                    <Image source={{ uri: require("./images/images3.jpg") }} />
                </View>
            </View>
        )
    }
}
export default Search