反应 FlatList renderItem

Question

我以前在 JS 中见过这种语法，我只是好奇它是如何工作的。在 React Native Docs for FlatList 中，一个示例调用 renderItem。 this._renderItem 如何知道它正在处理哪个单独的列表项？看起来 item 正在被解构，但是来自什么对象？

_renderItem = ({item}) => (
    <MyListItem
        id={item.id}
        onPressItem={this._onPressItem}
        selected={!!this.state.selected.get(item.id)}
        title={item.title}
    />
);

render() {
    return (
        <FlatList
            data={this.props.data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
        />
    );
}

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

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

renderItem 是否是一些特殊的道具，其中 {item} 将始终是解构的 arg？

Answer 1

data prop - 需要通过 data prop 将数据数组传递给 FlatList。在 this.props.data.

上可用

renderItem prop - 然后你想用 renderItem prop 渲染内容。该函数传递一个参数，它是一个对象。您感兴趣的数据在 item key 上，因此您可以使用解构从函数内部访问它。然后 return 使用该数据的组件。

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

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>
    );
}

反应 FlatList renderItem

React FlatList renderItem

javascript

reactjs

react-native

react-native-flatlist