Почему на экране ничего не отображается - предупреждение об уникальных ключевых свойствах (React Native)

Question

Я создаю приложение и экспериментирую с компонентами и, прежде всего, с анимацией. У меня есть приведенный ниже код с двумя компонентами класса:

import * as React from 'react';
import { StyleSheet, Text, View,  TouchableOpacity, Image, ImageBackground, Animated, Easing, Platform
} from 'react-native';
import { frame1 } from '../master-new/assets/index';
import { frame2 } from '../master-new/assets/index';
import { frame3 } from '../master-new/assets/index';

import { background } from '../master-new/assets/index';

const Images= [
  { id: 1, src: frame1, title: 'foo', description: 'bar'},
  { id: 2, src: frame2, title: 'foo', description: 'bar'},

]

const length = Images.length;

class Animation extends React.Component {
  constructor(){
  super();
  this.animations = new Animated.Value(0);
  this.opacity = [];
  Images.map((item, index) => {
    this.opacity.push(
      this.animations.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0],
      }),
    );
  });
 }
  componentDidMount() {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  }

  render() {

    return(
      <View style={styles.container}>

          {Images.map((item, index) => {
          const opacity = this.opacity[index];
          return (
            <Animated.View
              style={[styles.anim, {frame: item, opacity}]}
            />
          );
        })}

      </View>
    )
  }
}

export default class Timer extends React.Component {
  constructor(props){
  super(props);

  this.state = {
    time:0,
    start:0,
    isOn:false, 
    submit:false,
    scoreArray: [],
    animalArray: [],
    fadeAnim: new Animated.Value(0),

    pauseOver: false,
    pauseToggle: 'up',

  }

}

sampleInfo = [
  {
  second: 1,
  ml: '19ml',
  animal: 'Thing1',
  weight: '4kg',
  capacity: '20ml'
  },

  {
  second: 2,
  ml: '38ml',
  animal: 'Thing2',
  weight: '7kg',
  capacity: '35ml'
  },

  {
  second: 3,
  ml: '57ml',
  animal: 'Thing3',
  weight: '12kg',
  capacity: '60ml'
  }

] 

  render() {

    return(
      <View style={styles.container}>

      <Animation />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  anim: {
    flex: 1,
    width: '100%'

    }

});

Я показываю с помощью expo и ранее успешно отображал приложения и тестировал их в действии. Может кто-нибудь сказать мне, почему я вижу только пустой экран для этого?

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

Я прочитал: Предупреждение: каждый дочерний элемент в массиве или итератор должен иметь уникальную "ключевую" опору. Проверьте метод рендеринга ListView

и:

https://reactjs.org/docs/lists-and-keys.html

, но это ничего не прояснило для меня !

Т

Answer 1

Вам нужно поместить атрибуты key в элементы JSX, возвращаемые в al oop. Как:

{Images.map((item, index) => {
  const opacity = this.opacity[index];
  return (
    <Animated.View
      key={index}
      style={[styles.anim, {frame: item, opacity}]}
    />
  );
})}

Answer 2

react нужен способ идентификации узлов внутри пользовательского интерфейса, когда вы визуализируете список / массив, вам необходимо предоставить атрибут key компоненту, в вашем случае это когда вы визуализируете массив изображений, то есть когда response жалуется на это, react нужно, чтобы это знало, какой элемент обновлять, если обновление в состоянии было выполнено.

чтобы решить эту проблему, просто добавьте атрибут key к компоненту, убедитесь, что значение уникален, либо идентификатор, либо индекс элемента

 render() {

    return(
      <View style={styles.container}>

          {Images.map((item, index) => {
          const opacity = this.opacity[index];
          return (
            <Animated.View
              key = {item.id}
              style={[styles.anim, {frame: item, opacity}]}
            />
          );
        })}

      </View>
    )
  }

PS: используйте индекс только в крайнем случае, в вашем случае у вас есть идентификаторы, которые гарантированно будут уникальными, однако индекс не гарантировано.