Question

我正在使用此功能组件

// @flow

import Images from '../../Images'
import Styles from './IconStyles'

export type IconType = $Keys<typeof Images.icons>

export type IconProps = {
  type: IconType,
  style?: any,
}

const Icon = ({ type, style }: IconProps) => {
  return (
    <Image
      source={Images.icons[type]}
      style={[Styles.icon, style]}
    />
  )
}

我正在尝试将其转换为打字稿。到目前为止，我的进度如下

import React from 'react'
import { Image } from 'react-native'
import Images from '../../Images'
import Styles from './IconStyles'

export type IconType = keyof typeof Images.icons

interface IconProps {
  type: IconType
  style?: any
}
const Icon = ({ type, style }: IconProps) => (
  <Image source={Images.icons[type]} style={[Styles.icon, style]} />
)

export default Icon

Images js文件就是这样

const icons = {
  chevronDown: require('./Icons/chevron-down.png'),
  chevronRight: require('./Icons/chevron-right.png'),
  ...
}

export default {
  icons
}

你能窥视我朝正确的方向吗？我知道我的打字稿是正确的事实，但是我看不到应用程序中的任何图标。我怀疑这与images.js文件有关吗？

Answer 1

我意识到我没有设置图像的大小。我要做的就是

<Image
  source={AppIcons[type]}
  style={[Styles.icon, { height: 20, width: 20 }, style]}
/>

如何在React Native中将功能组件从流程迁移到打字稿？

1 个答案: