如何将 StyleSheet.absoluteFillObject 与 ts、react-native 和 styled 组件一起使用？

Posted 2023-03-13

【中文标题】如何将 StyleSheet.absoluteFillObject 与 ts、react-native 和 styled 组件一起使用？

【英文标题】：How to use StyleSheet.absoluteFillObject with ts, react-native and styled components?

【发布时间】：2019-03-26 10:23:36

【问题描述】：

我正在尝试使此代码正常工作

import  StyleSheet  from 'react-native';

const Container = styled.View`
   justify-content: center;
   align-items: center;
   $StyleSheet.absoluteFillObject;
`;

不幸的是，打字稿抱怨以下错误：

[ts]
Argument of type 'AbsoluteFillStyle' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<ViewProps & ContainerProps, any>>'.
  Type 'AbsoluteFillStyle' is not assignable to type 'ReadonlyArray<string | number | false | Styles | StyledComponentClass<any, any, any> | InterpolationFunction<ThemedStyledProps<ViewProps & ContainerProps, any>> | ReadonlyArray<FlattenInterpolation<ThemedStyledProps<ViewProps & ContainerProps, any>>> | null | undefined>'.
    Property 'length' is missing in type 'AbsoluteFillStyle'.

如有任何帮助，请提前致谢。

【参考方案1】：

以下语法应该可以使用带有样式组件的 CSS 属性对象，尽管我自己没有测试过：

import  StyleSheet  from 'react-native';

const Container = styled.View(
   ...StyleSheet.absoluteFillObject,
   justifyContent: center,
   alignItems: center
)

目前不支持在对 styled 的同一调用中将 CSS 属性对象与内插字符串混合。请参阅this issue 了解更多信息。

【参考方案2】：

让我们尝试这样的事情。参考文档链接clik here

import  StyleSheet  from 'react-native';

const styles = StyleSheet.create(
  container: 
    ...StyleSheet.absoluteFillObject,
    justifyContent: center,
    alignItems: center
  ,
);

【讨论】：

这是在 RN 中执行此操作的标准方式，但这里我需要使用 styled-components