octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed #15

This commit is contained in:
Zhiyuan Zheng 2021-02-09 00:24:02 +01:00
parent 383ebc2775
commit b842458626
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
1 changed files with 117 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/screens/ImagesViewer.tsx
View File

@ -1,14 +1,13 @@
import analytics from '@components/analytics' import analytics from '@components/analytics'
import { HeaderCenter, HeaderRight } from '@components/Header' import { HeaderRight } from '@components/Header'
import { useActionSheet } from '@expo/react-native-action-sheet' import { useActionSheet } from '@expo/react-native-action-sheet'
import { StackScreenProps } from '@react-navigation/stack' import { StackScreenProps } from '@react-navigation/stack'
import CameraRoll from '@react-native-community/cameraroll' import CameraRoll from '@react-native-community/cameraroll'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import { findIndex } from 'lodash' import { findIndex } from 'lodash'
import React, { useCallback, useLayoutEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { PermissionsAndroid, Platform, Share, StyleSheet } from 'react-native' import { PermissionsAndroid, Platform, Share } from 'react-native'
import FastImage from 'react-native-fast-image' import FastImage from 'react-native-fast-image'
import ImageViewer from 'react-native-image-zoom-viewer' import ImageViewer from 'react-native-image-zoom-viewer'
import { SharedElement } from 'react-navigation-shared-element' import { SharedElement } from 'react-navigation-shared-element'
@ -19,13 +18,12 @@ export type ScreenImagesViewerProp = StackScreenProps<
'Screen-ImagesViewer' 'Screen-ImagesViewer'
> >
const ScreenImagesViewer = React.memo( const ScreenImagesViewer = ({
({
route: { route: {
params: { imageUrls, imageIndex } params: { imageUrls, imageIndex }
}, },
navigation navigation
}: ScreenImagesViewerProp) => { }: ScreenImagesViewerProp) => {
const { theme } = useTheme() const { theme } = useTheme()
const [currentIndex, setCurrentIndex] = useState( const [currentIndex, setCurrentIndex] = useState(
findIndex(imageUrls, ['imageIndex', imageIndex]) findIndex(imageUrls, ['imageIndex', imageIndex])
@ -97,7 +95,7 @@ const ScreenImagesViewer = React.memo(
) )
}, [currentIndex]) }, [currentIndex])
useLayoutEffect( useEffect(
() => () =>
navigation.setOptions({ navigation.setOptions({
headerTitle: `${currentIndex + 1} / ${imageUrls.length}`, headerTitle: `${currentIndex + 1} / ${imageUrls.length}`,
@ -115,8 +113,8 @@ const ScreenImagesViewer = React.memo(
const renderImage = useCallback( const renderImage = useCallback(
prop => ( prop => (
<SharedElement id={`image.${imageUrls[imageIndex].url}`}> <SharedElement id={`imageFail.${imageUrls[imageIndex].url}`}>
<FastImage {...prop} resizeMode={'contain'} /> <FastImage {...prop} />
</SharedElement> </SharedElement>
), ),
[] []
@ -124,30 +122,18 @@ const ScreenImagesViewer = React.memo(
return ( return (
<ImageViewer <ImageViewer
index={currentIndex} index={imageIndex}
imageUrls={imageUrls} imageUrls={imageUrls}
pageAnimateTime={250}
enableSwipeDown enableSwipeDown
useNativeDriver useNativeDriver
swipeDownThreshold={100} swipeDownThreshold={100}
renderIndicator={() => <></>} renderIndicator={() => <></>}
saveToLocalByLongPress={false} saveToLocalByLongPress={false}
onSwipeDown={() => navigation.goBack()} onSwipeDown={() => navigation.goBack()}
style={{ flex: 1 }} onChange={index => index && setCurrentIndex(index)}
onChange={index => index !== undefined && setCurrentIndex(index)}
renderImage={renderImage} renderImage={renderImage}
onLongPress={saveImage}
/> />
) )
}, }
() => true
)
const styles = StyleSheet.create({
headerCenter: {
color: 'white',
...StyleConstants.FontStyle.M
}
})
export default ScreenImagesViewer export default ScreenImagesViewer