support aspect ratio in Image
This commit is contained in:
parent
c39f7f36c8
commit
406c5f68fd
|
@ -1,4 +1,4 @@
|
||||||
import React, { forwardRef } from 'react'
|
import { forwardRef } from 'react'
|
||||||
|
|
||||||
import { isWeb, setupReactNative, styled } from '@tamagui/core'
|
import { isWeb, setupReactNative, styled } from '@tamagui/core'
|
||||||
import { Image as RNImage } from 'react-native'
|
import { Image as RNImage } from 'react-native'
|
||||||
|
@ -16,32 +16,48 @@ setupReactNative({
|
||||||
const Base = styled(RNImage, {
|
const Base = styled(RNImage, {
|
||||||
name: 'Image',
|
name: 'Image',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
source: { uri: '' },
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
source: {
|
||||||
|
uri: '',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
type InputProps = GetProps<typeof Image>
|
type InputProps = GetProps<typeof Image>
|
||||||
|
|
||||||
|
// type W = InputProps['width']
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
src: string
|
src: string
|
||||||
width: number
|
width: number | 'full'
|
||||||
height: number
|
height?: number
|
||||||
|
aspectRatio?: number
|
||||||
// onLoad?: InputProps['onLoad']
|
// onLoad?: InputProps['onLoad']
|
||||||
// onError?: InputProps['onError']
|
// onError?: InputProps['onError']
|
||||||
}
|
}
|
||||||
|
|
||||||
const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
|
const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
|
||||||
const { src } = props
|
const { src, aspectRatio, ...rest } = props
|
||||||
|
|
||||||
const source =
|
const width = props.width === 'full' ? '100%' : props.width
|
||||||
typeof src === 'string'
|
const height = aspectRatio ? undefined : props.height
|
||||||
? {
|
|
||||||
uri: src,
|
|
||||||
...(isWeb && { width: props.width, height: props.height }),
|
|
||||||
}
|
|
||||||
: src
|
|
||||||
|
|
||||||
return <Base source={source} ref={ref} />
|
const source = {
|
||||||
|
uri: src,
|
||||||
|
...(isWeb && { width, height }),
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Base
|
||||||
|
{...rest}
|
||||||
|
ref={ref}
|
||||||
|
source={source}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
style={{
|
||||||
|
aspectRatio,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// focusableInputHOC(Image)
|
// focusableInputHOC(Image)
|
||||||
|
|
Loading…
Reference in New Issue