时间戳

首页 > 解决方案 > 平面列表导航到另一个屏幕

javascript - 平面列表导航到另一个屏幕

问题描述

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

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

我的平面列表：

<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>

标签： javascriptreact-nativereact-navigationreact-native-flatlistreact-native-navigation

解决方案

您应该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>
   );
}

推荐阅读