Есть ли возможность подключать динамически картинки в react-native?

Question

[Andrey Perov]

Есть задача подгружать много карточек, у каждой своя картинка. Так выглядит компонент Card.js

<Image source={require(this.props.image)} style={styles.cardImage}>

import React, { Component } from 'react';

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

export default class Card extends Component {
    render() {

        console.log(this.props.image);

        return (
            <View>
                <Image source={require(this.props.image)} style={styles.cardImage}>
                    <View style={styles.wrapCard}>
                        <Text style={styles.titleCard}>{this.props.title}</Text>
                    </View>
                </Image>
            </View>
        )
    }
}

styles = StyleSheet.create({
    cardImage: {
        flex: 1,
        width: 278,
        height: 107,
        resizeMode: 'cover', // or 'stretch'
    },

    wrapCard: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    titleCard: {
        fontSize: 16,
        fontWeight: "900",
        color: '#0f1d1e',
    }
});

Через props передаем строку путь к картинке

import React, { Component } from 'react';
import {
    AppRegistry,
    Alert,
    StyleSheet,
    ScrollView,
    Text,
    Button,
    Image,
    View
} from 'react-native';

import CardContainer from './src/components/containers/CardContainer';

import Logo from './src/components/view/Logo/Logo';
import Authorization from './src/components/view/Authorization/Authorization';
import Search from './src/components/view/Search/Search';

export default class app extends Component {
  render() {
    return (
        <ScrollView>
            <View style={styles.headerContainer}>
                <View style={styles.headerLogoContainer}>
                    <Logo/>
                </View>
                <View style={styles.headerButtonContainer}>
                    <Authorization/>
                </View>
            </View>
            <View style={styles.searchContainer}>
                <Search/>
            </View>
            <View style={styles.searchContainer}>
                <CardContainer title={"Кредиты"} imageName={"./t-v.png"}/>
            </View>
            <View style={styles.searchContainer}>
                <CardContainer title={"Займы"} imageName={"./t-v2.png"}/>
            </View>

        </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
    headerContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },

    headerLogoContainer: {
        flex: 0.5,
        height: 50,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-start'
    },

    headerButtonContainer: {
        flex: 0.5,
        flexDirection: 'column',
        justifyContent: 'space-between',
        height: 50,
        alignItems: 'flex-end'
    },

    searchContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: 16,
        marginBottom: 24,
    }
});

AppRegistry.registerComponent('app', () => app);

Можно ли подключать динамически картинки? Через require выдает: Unknown named module: './t-v.png'

case не вариант

Answer 1

[Andrey Perov]

Получилось только так сделать, вынести require в index и через props опускать

<CardContainer title={"Кредиты"} source={require('./src/components/view/Card/t-v.png')}/>

Comments

[Михаил Ярема]

Добрый день, подскажите пожалуйста, что значит вынести require в index. У меня такая же проблема как у Вас.