如何为React Native中FlatList列表项绑定onPress事件实现跳转

问题原因 #

FlatList 组件本身没有内置onPress属性，你把点击事件绑定在列表容器上自然不会触发，需要将事件绑定到每个渲染出来的单个宝可梦卡片项上。

具体实现步骤 #

1. 引入React Native自带的可点击组件，推荐用TouchableOpacity（点击有透明度变化的反馈，用户体验更好）或者Pressable。
2. 用可点击组件包裹你原来渲染单个宝可梦的View容器，把点击事件写在这个组件上。
3. 如果需要跳转详情页，直接调用导航的navigate方法，同时把当前宝可梦的id、名称等需要的参数传递给详情页。

修改后的代码示例 #

首先是renderPokemon函数的修改：

// 先从react-native导入TouchableOpacity
import { View, Image, Text, TouchableOpacity } from 'react-native'

//FlatList渲染单个宝可梦的函数
// 如果你当前不在页面组件内，记得把navigation作为参数传入renderPokemon
const renderPokemon = ({ item, navigation }) => {
  let url = item.url
  const idPokemon = url.split('https://pokeapi.co/api/v2/pokemon/')
  const pokemonId = idPokemon[1].substring(0, idPokemon[1].length-1)
  const link = urlImage + pokemonId + ".png"

  return (
    // 用TouchableOpacity包裹原来的View，添加onPress事件
    <TouchableOpacity 
      style={styles.pokemons}
      onPress={() => {
        // 测试用alert可以放在这里验证点击效果
        alert(`点击了${item.name}`)
        // 跳转详情页，同时传递宝可梦id和名称等参数
        navigation.navigate('PokemonDetail', {
          pokemonId: pokemonId,
          pokemonName: item.name
        })
      }}
    > 
      <Image 
        style={styles.image} 
        resizeMode='contain' 
        source={{uri:link}}
      />
      <Text style={styles.text}>{item.name}</Text>
    </TouchableOpacity>
  )
}

然后修改FlatList的配置，删除原本写在FlatList上的无效onPress，同时把navigation传给renderItem：

// 假设你当前的页面组件能拿到navigation props
<FlatList
  numColumns={2}
  data={pokemons}
  // 把navigation传入renderPokemon
  renderItem={(props) => renderPokemon({...props, navigation: navigation})}
  keyExtractor={pokemon => `key-${pokemon.name}`}
  style={styles.container}
>
</FlatList>

详情页参数接收 #

在你新建的宝可梦详情页组件里，可以通过route.params拿到传递过来的宝可梦数据，再请求对应详情接口渲染即可：

const PokemonDetailScreen = ({ route }) => {
  const { pokemonId, pokemonName } = route.params
  // 后续根据pokemonId请求详情接口渲染页面即可
}

注意：如果你的renderPokemon函数直接写在页面组件内部，不需要额外传navigation参数，直接调用页面内的navigation变量即可；另外要确保你的导航栈里已经注册了PokemonDetail路由，否则跳转时会报错。

内容的提问来源于stack exchange，提问作者mmiah