如何在React native with Typescript中传递StyleSheet中的参数

cgvd09ve  于 2022-12-14  发布在  React
关注(0)|答案(1)|浏览(157)

我刚刚将我的Javascript react原生项目切换到Typescript项目,但是当我更改它时,在StyleSheet()中插入函数时出现了很多错误
以前我是这样做的:

const Header = ({ someBoolean }) => (
  <View style={styles.conditionalStyle(someBoolean)}>
    <Text></Text>
  </View>
);

const styles = StyleSheet.create({
  conditionalStyle: (someBoolean) => ({
    marginTop: someBoolean ? 20 : 5
  })
});

但是当我切换到typescript时,它开始抛出这些错误:

Type `
(absolute: any) => {
  height: number;
  width: number;
  display: string;
  flexDirection: string;
  borderBottomLeftRadius: number;
  borderBottomRightRadius: number;
  position: string;
  zIndex: number;
}` is not assignable to type `ViewStyle | TextStyle | ImageStyle` ts(2322)
Header.tsx(81, 3):
The expected type comes from property `containerMain` which is declared here on type `
NamedStyles<any> | NamedStyles<{
  container: {
    height: number;
    width: number;
    display: "flex";
    flexDirection: "row";
    borderBottomLeftRadius: number;
    borderBottomRightRadius: number;
  };
  ... 8 more ...;
  screen: (absolute: any) => {
    ...;
  };
}> | NamedStyles<...>`

下面是我的代码的一个示例:

const Header: FC<HeaderProps> = ({ someBoolean }) => (
    <View style={styles.conditionalStyle(someBoolean)}>
      <Text></Text>
    </View>
);

const styles = StyleSheet.create({
    conditionalStyle: (someBoolean) => ({ // ERROR
        marginTop: someBoolean ? 20 : 5
    })
});

是否有其他方法来传递条件样式/属性?

juzqafwq

juzqafwq1#

要执行您所陈述的操作,您必须将参数传递给您的StyleSheet,并在组件的顶部定义它
因此在您的组件中执行以下操作...
将参数添加到样式表定义中。

export const styling = (someBoolean:boolean) =>
  StyleSheet.create({
    conditionalStyle:{
        marginTop: someBoolean ? 20 : 5
    }
});

导入样式函数(如果来自外部文件)。

import styling from ...

在组件中定义样式。

const Header:FC<HeaderProps> = ({ someBoolean }) => (

    const styles = styling(someBoolean);

    <View style={styles.conditionalStyle}>
      <Text></Text>
    </View>
);

这种将参数发送到StyleSheet的方式将允许您通过useState或Redux以编程方式更新不同的样式值

相关问题