如何使用 Typescript 在 React Native 中传递 StyleSheet 参数

Question

我刚刚将我的 Javascript React Native 项目切换到 Typescript 项目，但是当我更改它时，在

StyleSheet()

中插入函数时出现很多错误

以前我经常这样做：

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

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

但是当我切换到打字稿时，它开始抛出这些错误：

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
    })
});

是否有其他方法来传递条件样式/道具？

Answer 1

要执行您所说的操作，您必须将参数传递到样式表并在组件顶部定义它

所以在你的组件中做这样的事情......

将参数添加到样式表定义中。

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 以编程方式更新不同的样式值

Answer 2

另一种解决方案（在我看来更容易）是在组件内创建样式表，这样您就可以像平常一样使用所有道具：

const Header = ({ someBoolean }) => {

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

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

Answer 3

另一种选择是为不同场合定义不同的样式，并在传递给 View 时对其进行调整

组件外部定义的样式：

const style = StyleSheet.create({
  someObject: {
    marginTop: 5,
  },
  someObjectActive: {
    marginTop: 20,
  },
});

用途：

<View style={[style.someObject, isActive && style.someObjectActive]}>
    <Text></Text>
</View>