React-Native中Array的key警告

我们在项目里面，经常会用的批次渲染，比如一个列表渲染很多个item，或者一个横排或者竖排同时渲染多个数据等这种情况，一个个写显然是最笨的做法，当数据多时根本无法做到，此时很多人都会想到以下做法：

render(){
    var eleArray = [];
    for(var i=0;i<ZWViewExample.examples.length;i++){
      var ele=(
        <View style={{marginBottom: 10, backgroundColor: 'white', padding: 10}}>
          <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text>
          {ZWViewExamdple.examples[i].render()}
        </View>
      )
       eleArray.push(ele);
    }
    return(
      <ScrollView style={{flex:1}}>
        {eleArray}
      </ScrollView>
    );
  }

这样写确实是一个非常不错的做法，但是这样写，React-Native会报一个警告，需要你对每个item添加一个key。

解决方法就是为View加上一个key,这个key可以成为每一个View的唯一标识，根据这个标识就可以找到指定的View进行操作。

改进后的写法为：

render(){
    var eleArray = [];
    for(var i=0;i<ZWViewExample.examples.length;i++){
      var ele=(
        <View style={{marginBottom: 10, backgroundColor: 'white', padding: 10}} key={i}>
          <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text>
          {ZWViewExamdple.examples[i].render()}
        </View>
      )
       eleArray.push(ele);
    }
    return(
      <ScrollView style={{flex:1}}>
        {eleArray}
      </ScrollView>
    );
  }