React FlatList renderItem

Question

之前我在JS中看过这种语法，我很好奇它是如何工作的。在FlatList的React Native Docs中，一个示例调用renderItem。 this._renderItem如何知道它正在使用哪个单独的列表项？看起来项目正在被破坏，但是从什么对象？

换句话说：在Flatlist中，进行同一次调用的另一种方法可能是：

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

renderItem是一个特殊的道具，{item}将永远是destructured arg？

Answer 1

数据支持 - 需要通过data prop将数据数组传递到 FlatList 。这可以在this.props.data上找到。

renderItem prop - 然后您想要使用renderItem道具渲染内容。该函数传递一个参数，该参数是一个对象。您感兴趣的数据位于item key，因此您可以使用解构来从函数中访问该数据。然后使用该数据返回一个组件。

render() {
 return (
    <List>
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          // return a component using that data
        )}
      />
    </List>
 );
}

Answer 2

除了@Balasubramanian所说的以外，renderItem指向current item，由于您使用的是List组件作为包装器，因此您也可以在内部使用'ListItem'组件renderItem函数来render的数据current item，如下所示：

renderItem={({ item, index }) => {
  return (
     <ListItem
        key={index}
        title={item.name}
        onPress={ () => this.assetSelected(item) }
      />
  );
}

Answer 3

  <FlatList
                data={['1', '2', '3', '4', '5', '6']}
                renderItem={({ item }) => (
                  <Text>{ item }</Text>
                )}
            />

输出 1个 2 3 4 5 6

Answer 4

 <ListItem
    data={this.state.data}
    key={(item,index)=>index.toString()}
    renderItem={({ item }) => <YourComponent item={item}> }
  />

Answer 5

import { places } from '../data/DataArray';

export const Home = (props) => {
    const renderPlace = ({ item }) => (
        <TouchableOpacity onPress={() => props.navigation.navigate('SingleTour')}>
            <Text style={styles.item}>{item.name}</Text>
        </TouchableOpacity>
    );
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <FlatList
                data={places}
                renderItem={
                    renderPlace
                }
            />
        </View>
    );
}