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怎么包裹使用的主要内容,如果未能解决你的问题,请参考以下文章

react-native怎么动态改变样式

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

react-native中的style

如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件?

如何在 TextInput REACT-NATIVE 中创建阴影

如何在Ubuntu 16.04安装R