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

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

import { StyleSheet } from 'react-native';

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

Answer 2

以下语法应该可以用于具有样式组件的CSS属性对象，尽管我自己尚未对其进行测试：

import { StyleSheet } from 'react-native';

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

目前不支持在对styled的同一调用上与插入的字符串混合CSS属性对象。有关更多信息，请参见this issue。

如何将StyleSheet.absoluteFillObject与ts，react-native和样式化的组件一起使用？

2 个答案: