React Native CLI中如何在样式表内定义带类型的函数？

问题核心在于StyleSheet.create的返回对象仅允许静态样式（ViewStyle/TextStyle/ImageStyle类型），直接在里面定义函数不符合它的类型约束，因此触发了类型不匹配错误。

推荐两种解决方式，优先选择第一种：

方法一：将动态样式函数从StyleSheet中单独提取 #

这是最贴合React Native设计逻辑的做法——StyleSheet本身是用来创建可缓存的静态样式的，动态计算的样式函数没必要放在里面：

import { StyleSheet, ViewStyle } from 'react-native';

// 单独定义spacing函数，明确返回ViewStyle类型
export const spacing = (marginBottom: number): ViewStyle => {
  return { marginBottom };
};

// 静态样式继续放在StyleSheet.create中
export const styles = StyleSheet.create({
  // 示例静态样式：
  container: {
    flex: 1,
    padding: 16
  }
});

使用方式和你预期的几乎一致，直接调用独立的spacing函数即可：

<View style={spacing(50)}>
    <Button title={'Login'} onPress={handleSign} />
</View>

方法二：扩展StyleSheet类型（不推荐） #

如果一定要把函数挂在styles对象上，可以通过类型断言扩展StyleSheet的返回类型，但这种方式会绕开StyleSheet的原生类型检查，并非最优解：

import { StyleSheet, ViewStyle, StyleSheetStatic } from 'react-native';

// 定义包含spacing函数的自定义样式类型
type CustomStyles = StyleSheetStatic & {
  spacing: (marginBottom: number) => ViewStyle;
};

// 创建静态样式后，用类型断言转为自定义类型
export const styles = StyleSheet.create({
  // 静态样式
}) as CustomStyles;

// 手动添加spacing函数
styles.spacing = (marginBottom: number) => ({ marginBottom });

使用方式和你原本的写法保持一致：

<View style={styles.spacing(50)}>
    <Button title={'Login'} onPress={handleSign} />
</View>

总结：优先采用方法一，既符合TypeScript类型规范，也贴合StyleSheet的设计初衷。

内容的提问来源于stack exchange，提问作者Nathan Moreira