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

【问题标题】：How to migrate functional component from flow to typescript in react native?如何在 React Native 中将功能组件从流程迁移到打字稿？
【发布时间】：2019-01-11 00:20:11
【问题描述】：

我有这个功能组件在流程中

// @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 文件有关？

【问题讨论】：

标签： typescript react-native flowtype

【解决方案1】：

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

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

【讨论】：