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 { Image as RNImage } from 'react-native'
|
||||
|
@ -16,32 +16,48 @@ setupReactNative({
|
|||
const Base = styled(RNImage, {
|
||||
name: 'Image',
|
||||
position: 'relative',
|
||||
source: { uri: '' },
|
||||
zIndex: 1,
|
||||
source: {
|
||||
uri: '',
|
||||
},
|
||||
})
|
||||
|
||||
type InputProps = GetProps<typeof Image>
|
||||
|
||||
// type W = InputProps['width']
|
||||
|
||||
interface Props {
|
||||
src: string
|
||||
width: number
|
||||
height: number
|
||||
width: number | 'full'
|
||||
height?: number
|
||||
aspectRatio?: number
|
||||
// onLoad?: InputProps['onLoad']
|
||||
// onError?: InputProps['onError']
|
||||
}
|
||||
|
||||
const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
|
||||
const { src } = props
|
||||
const { src, aspectRatio, ...rest } = props
|
||||
|
||||
const source =
|
||||
typeof src === 'string'
|
||||
? {
|
||||
const width = props.width === 'full' ? '100%' : props.width
|
||||
const height = aspectRatio ? undefined : props.height
|
||||
|
||||
const source = {
|
||||
uri: src,
|
||||
...(isWeb && { width: props.width, height: props.height }),
|
||||
...(isWeb && { width, height }),
|
||||
}
|
||||
: src
|
||||
|
||||
return <Base source={source} ref={ref} />
|
||||
return (
|
||||
<Base
|
||||
{...rest}
|
||||
ref={ref}
|
||||
source={source}
|
||||
width={width}
|
||||
height={height}
|
||||
style={{
|
||||
aspectRatio,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// focusableInputHOC(Image)
|
||||
|
|
Loading…
Reference in New Issue