时间戳

首页 > 解决方案 > 为什么这不会在屏幕上显示任何内容 - 关于唯一键道具的警告（React Native）

react-native - 为什么这不会在屏幕上显示任何内容 - 关于唯一键道具的警告（React Native）

问题描述

我正在创建一个应用程序并尝试使用组件，最重要的是，动画。我有以下带有两个类组件的代码：

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

但它并没有为我清除任何东西！

吨

标签： react-native

解决方案

react 需要一种方法来识别 UI 内的节点，当您渲染列表/数组时，您需要为key组件提供属性，在您的情况下，它是在您渲染图像数组时，即当 react 抱怨时，如果对状态进行了更新，react 需要它来知道要更新什么项目。

要解决这个问题，只需将key属性添加到组件中，确保值是唯一的，可以是 id 或项目的索引


 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：仅在不得已的情况下才使用索引，在您的情况下，您有 id，它保证是唯一的，但是不能保证索引。

推荐阅读