Reactnative Animated.View 的样式props的Typescript定义

发布于07月29日

我有一个组件，其Props接口从React Native扩展到ViewProps，即:

export interface Props extends ViewProps {
  // Custom props
}

当然，这是styleprops 的延伸.有一个警告，我用的是Animated.View，风格如下:

style={{
  opacity: animationCharacter.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1]
  }),
  transform: [
    {
      scale: animationCharacter.interpolate({
        inputRange: [0, 1],
        outputRange: [1.2, 1]
      })
    }
  ]
}}

我认为interpolate呼叫与ViewProps的样式输入不兼容，但我无法扩展AnimatedViewProps.

这里有解决方案吗？还是我必须设置style: any？

推荐答案

我不相信有一个内置的解决方案.看看the type definitions for React Native，动画名称空间甚至没有为动画组件指定类型，just leaves them as any:

/**
 * Animated variants of the basic native views. Accepts Animated.Value for
 * props and style.
 */
export const View: any;
export const Image: any;
export const Text: any;
export const ScrollView: any;

即使是React原生源(使用FlowType)也将props 保留为plain Object type:

class AnimatedComponent extends React.Component<Object> {
  …
}

这可能是因为React Native有专门用于内部处理动画styles和props(甚至transforms)的包装器类，这使得由于抽象而很难精确地指定类型.我认为你最好的 Select 是使用any，因为创建自己的类型会非常乏味，而且几乎没有什么好处.

React-native相关问答推荐

对iOS通知上未显示的本机映像做出react

为什么当我更换屏幕时playground 音乐不会停止？

React Native - 如何在从另一个屏幕导航后将 ScrollView 滚动到给定位置

如果没有启用远程调试器，React Native 代码将无法工作

React Native WebView 中的 Javascript console.log()

React Native 在升级到 0.56 版本后崩溃

打包程序无法启动

如何在react-native 中加密和解密文本？

如何使用 InteractionManager.runAfterInteractions 使导航器过渡更快

如何在 React Native 中按下按钮时更改文本值？

如何在react native应用程序名称中添加空格？

以编程方式在 React Native 中添加组件

如何渲染多行文本组件，行间有白色间隙

如何在 React Native 中获取电话号码？

如何在 React Native 上获取设备的 ip？

horizontal水平 FlatList 前后的间距

如何在 React Native 中禁用图像淡入效果？

如何在 React Native 上隐藏 createStackNavigator 的标题？

从标题中的按钮导航到不同的屏幕

将 async 和 await 与 export const 一起使用

实用课程推荐