在 Instagram 中像点击 post 一样反应本机导航

Question

我正在制作一个带有 React Native 的相册应用程序，并且想制作 FlatList 像 Instagram 这样的图像。当点击 FlatList 的项目时，它将导航到具有不同 FlatList 的另一个屏幕中的相同项目。如何做到这一点？

点击图片JS时

在另一个屏幕中导航到它

我的代码：

const RenderItemList = ({item, index}) => {
   return (
     <Pressable onPress={() => navigation.navigate('detail')}>
     <View key={index} style={[index%3!==0 ? {paddingLeft:2} : {paddingLeft:0}, {marginBottom: 2}]}>  
     
      <Image style={{width: sizeOfImage, height: sizeOfImage}}
      source={{uri : item.uri}}
      />
     </View>
     </Pressable>         
)}

Answer 1

您可以使用 Flatlist API 中的 initialScrollIndex 道具。将索引作为路由参数传递给其他屏幕并将 initialScrollIndex 设置为该索引。

下面的例子

<FlatList
  data={sampleImages}
  keyExtractor={(item) => item.id.toString()}
  numColumns={3}
  renderItem={({ item, index }) => (
    <Pressable
      style={{ width: EachWidth, height: EachWidth }}
      onPress={() => navigation.navigate('Details', { initialScroll: index })}>
      <Image
        source={{ uri: item.download_url }}
        style={{ width: EachWidth, height: EachWidth }}
      />
    </Pressable>
  )}
/>

在其他屏幕上，

<FlatList
  data={sampleImages}
  keyExtractor={(item) => item.id.toString()}
  initialScrollIndex={route.params.initialScroll || 0} // Use here
  renderItem={({ item }) => (
    <View style={{ width: ScreenWidth, height: ScreenWidth }}>
      <Image
        source={{ uri: item.download_url }}
        style={{ width: ScreenWidth, height: ScreenWidth }}
      />
    </View>
  )}
/>

Working Example

在 Instagram 中像点击 post 一样反应本机导航

React native navigate like click post in Instagram

react-native

navigation

react-native-flatlist