FlatList 在类型上生成 cellkey 不匹配

Question

我有以下应用程序，并且在我的 FlatList 上收到一条奇怪的错误消息：

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of 
type `number` supplied to `CellRenderer`, expected `string`.

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of 
type `number` supplied to `CellRenderer`, expected `string`.

import React from 'react';
import { StyleSheet, Text, ScrollView, FlatList, View, Button, SegmentedControlIOS } from 'react-native';
import contacts from './contacts';
import {Constants} from 'expo';

console.log(contacts)

const Row=(props)=>(
  <View style={styles.row}>
    <Text >{props.name}</Text>
    <Text >{props.phone}</Text>
  </View>
)

export default class App extends React.Component {
  state={show: false,selectedIndex: 0}

  toggleContacts=()=>{
    this.setState({show:!this.state.show})
  }

  renderItem=(obj)=>{  
    console.log(obj)

    return <Row {...obj.item} />
  }

  render() {
    // console.log(this.state)
    return (
      <View style={styles.container}>
        <Button title="toggle names" onPress={this.toggleContacts}  />
        <SegmentedControlIOS
          values={['ScrollView', 'FlatList','SectionList']}
          selectedIndex={this.state.selectedIndex}
          onChange={(event) => {
            this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
          }} />
        {this.state.show && this.state.selectedIndex === 0 &&
          <ScrollView >
            {contacts.map(contact=>(
              <Row  {...contact}/> ))}
          </ScrollView>}

        {this.state.show && this.state.selectedIndex === 1 &&
          <FlatList
            renderItem={obj => (this.renderItem(obj))}
            data={contacts}
          />}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    // alignItems: 'flex-start',
    paddingTop: Constants.statusBarHeight + 25,
  },
  row: {
    padding:20,
  },
});

Answer 1

对于 react-native@0.55

在平面列表中添加：

keyExtractor = { (item, index) => index.toString() }