反应原生和打字稿多内联样式

Posted

技术标签:

【中文标题】反应原生和打字稿多内联样式【英文标题】:React native and typescript multi inline styling 【发布时间】:2018-04-11 19:35:23 【问题描述】:

我正在尝试在 react-native 和 typescript 中实现类似的功能 -

<View style=[styles.a, styles.b]> </View>

const styles = StyleSheet.create(
    a: color: 'red',
    b:flex: 1
)

但我在打字稿中收到以下构建错误-

错误 TS2322: 类型 ' style: (ViewStyle | ImageStyle)[];孩子:元素[]; ' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes> & Reado...'。 类型'风格:(ViewStyle | ImageStyle)[];孩子:元素[]; ' 不可分配给类型“只读”。 属性“样式”的类型不兼容。 类型 '(ViewStyle | ImageStyle)[]' 不可分配给类型 'ViewStyle |不明确的'。 类型“(ViewStyle | ImageStyle)[]”与类型“ViewStyle”没有共同的属性。

任何帮助将不胜感激。

提前致谢。

【问题讨论】:

【参考方案1】:

使用扩展运算符可能是最好的方法。这应该返回一个 ViewStyle 对象

<View style=...styles.a, ...styles.b> </View>

【讨论】:

【参考方案2】:

这是一种解决方法

<View style=[styles.a, styles.b] as ViewStyle> </View>

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17622#issuecomment-312050586

【讨论】:

以上是关于反应原生和打字稿多内联样式的主要内容,如果未能解决你的问题,请参考以下文章

反应内联样式不适用于某些属性

设置复杂的反应内联样式,例如悬停,在反应组件(例如按钮)上处于活动状态

语法错误:在反应中使用内联样式时,标识符直接位于数字之后

具有本机反应的条件内联样式[重复]

反应内联样式 - 用居中文本替换 tbody

造型反应原生