平面列表导航到另一个屏幕答案

【问题标题】：Flatlist navigation to another screen平面列表导航到另一个屏幕
【发布时间】：2021-01-16 13:18:12
【问题描述】：

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

从字面上看，没有任何反应，也不会在控制台上出现任何错误

我的平面列表：

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

我来自平面列表的“渲染项目”：

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>

【问题讨论】：

标签： javascript react-native react-navigation react-native-flatlist react-native-navigation

【解决方案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>
   );
}

【讨论】：

【解决方案2】：

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

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

【讨论】：