Как отобразить случайное изображение, полученное из массива в реагировать родной

Question

Я пытаюсь случайным образом отобразить изображения из локального файла, который был сохранен в массиве в компоненте Card, который затем отображается в приложении, root приложения.

Вот Файл изображений, содержащий массив изображений в том же каталоге.

const woolyImages = [
  require('images/wooly1'),
  require('images/wooly2'),
  require('images/wooly3'),
  require('images/wooly4'),
  require('images/wooly5'),
];

export default woolyImages;

Здесь находится компонент Card, в котором я пытаюсь выбрать случайное изображение из массива и отобразить его с помощью компонента Image через 'source'.

import React from 'react';
import {Image, View, StyleSheet} from 'react-native';
import woolyImages from '../images/Images';

function Card() {
  const randomImage =
    woolyImages[Math.floor(Math.random() * woolyImages.length)];
  console.log(randomImage);

  return (
    <View style={styles.cardContainer}>
      <Image source={randomImage} />
    </View>
  );
}

const styles = StyleSheet.create({
  cardContainer: {
    width: '50%',
    height: '35%',
    backgroundColor: 'pink',
  },
});

export default Card;

(я вставил розовый фон, чтобы быть уверенным, что он отображается в представлении. Это так.)

Наконец, вот root приложения, в котором я отображаю карта.

import React from 'react';
import {View, StyleSheet} from 'react-native';
import Header from './components/Header';
import Card from './components/Card';
import GenerateWoolyButton from './components/GenerateWoolyButton';

function App() {
  return (
    <View style={styles.container}>
      <Header />
      <Card />
      <GenerateWoolyButton style={styles.button} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    flex: 1,
  },
});

export default App;

Я получаю сообщение об ошибке ниже.

Может кто-нибудь сказать, пожалуйста, как отобразить случайно сгенерированное изображение в компоненте карты и отобразить его в root моего приложения? Спасибо.

Answer 1

Вам необходимо добавить стили width & height к изображению компонента вашей карты. Например,

<Image source={randomImage} style={{height: 200, width: 200}} />

Надеюсь, это поможет вам. Не стесняйтесь сомнений.