react-native style怎么包裹使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native style怎么包裹使用相关的知识,希望对你有一定的参考价值。
参考技术A style 可以写在 StyleSheet.create 中也可以 写在 行内 style=
如何将 StyleSheet.absoluteFillObject 与 ts、react-native 和 styled 组件一起使用?
【中文标题】如何将 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以上是关于react-native style怎么包裹使用的主要内容,如果未能解决你的问题,请参考以下文章
如何将 StyleSheet.absoluteFillObject 与 ts、react-native 和 styled 组件一起使用?
如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件?