Блог

Я создаю приложение для альбома с помощью react native и хочу создавать FlatList его с помощью изображений, таких как Instagram. При нажатии на элемент FlatList , он перейдет к тому же элементу на другом экране с другим FlatList . Как это сделать?

1. при нажатии на изображение JS

2. перейдите к нему на другом экране

Мой код:

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

Вы можете использовать initialScrollIndex prop из Flatlist API. Передайте индекс в качестве параметров маршрута на другой экран и установите 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>
  )}
/>
 

Рабочий Пример