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

Question

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

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'.

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

Answer 1

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

import { StyleSheet } from 'react-native';

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

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

Answer 2

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

import { StyleSheet } from 'react-native';

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