Question

所以，我有一个呈现电影列表的 Flatlist，我试图在单击它时将我移动到详细信息页面，但它不起作用。

从字面上看，什么都没有发生，也没有在控制台上出现任何错误

我的平面列表：

<FlatList
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      horizontal
      data={movies}
      onPress={() => navigation.navigate('Details')}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />

来自 flatlist 的“renderitem”：

const renderItem = ({ item }) => (
<RenderList url={item.poster_path} title={item.original_title} />

);

这就是适合 const "renderItem" 的 RenderList 组件：

<View style={styles.view}>
  <Image
    style={{ width: 150, height: 220 }}
    source={{ uri: 'https://image.tmdb.org/t/p/w500/' + props.url }}
  />
</View>

Answer 1

您应该在每个列表项上都有 onPress，而不是在 Flatlist

<FlatList
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  horizontal
  data={movies}
  renderItem={renderItem}
  keyExtractor={(item) => item.id.toString()}
/>

const renderItem = ({ item }) => {
   return (
      <TouchableOpacity onPress={() => navigation.navigate('Details')}>
        <RenderList url={item.poster_path} title={item.original_title} />
      </TouchableOpacity>
   );
}

Answer 2

您应该从为每个项目循环的 onPress 调用 TouchableOpacity。

<FlatList
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  horizontal
  data={movies}
  onPress={() => navigation.navigate('Details')}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => {
     return (
        <TouchableOpacity onPress={() => navigation.navigate('Details')}>
          <RenderList url={item.poster_path} title={item.original_title} />
        </TouchableOpacity>
     );
   }}
/>

Flatlist 导航到另一个屏幕

2 个答案: