Не удается прочитать свойства неопределенного (чтение «toString») React Native Reanimated Carousel

Я пытаюсь использовать React native reanimated carousel в выставочном проекте, зная, что я уже использовал его в предыдущем, и он работал нормально. Итак, я скопировал и вставил тот же код, но по неизвестной причине получаю следующую ошибку:

TypeError: Cannot read properties of undefined (reading 'toString')

Поэтому я использовал пример с голым кодом из документации и обнаружил, что у меня все еще возникает та же проблема. Вот версии пакетов, которые я использую:

"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-reanimated-carousel": "^3.1.5",

Пример.js

import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style = {{ flex: 1 }}>
            <Carousel
                loop
                width = {width}
                height = {width / 2}
                autoPlay = {true}
                data = {[...new Array(6).keys()]}
                scrollAnimationDuration = {1000}
                onSnapToItem = {(index) => console.info('current index:', index)}
                renderItem = {({ index }) => (
                    <View
                        style = {{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style = {{ textAlign: 'center', fontSize: 30 }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

export default Index;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
190
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я думаю, проблема в вашей функции renderItem. Вы создаете список целых чисел в виде данных и пытаетесь передать целое число как дочерний элемент:

<Text style = {{ textAlign: 'center', fontSize: 30 }}>
   {index}
</Text>

заменить его на

<Text style = {{ textAlign: 'center', fontSize: 30 }}>
   {`${index}`}
</Text>
Ответ принят как подходящий

Данная проблема возникла из-за отсутствия реанимированного плагина в файле babel.config.js. На основе документации вот что нужно сделать.

Добавьте плагин Reanimated Babel к вашему babel.config.js

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Решение для меня;

Babel.config.js

plugins: ['react-native-reanimated/plugin']

и "начало выставки -c"

Другие вопросы по теме