React Native结合TypeScript如何向StyleSheet传递Props？

• 首先是组件结构语法错误：原代码中CustomButton箭头函数在写完return语句后，没有添加函数闭合的右大括号}，直接衔接了后续的styles函数定义，导致整个代码作用域混乱，TypeScript静态检查无法正确识别传入styles的参数类型，才会抛出“参数无法赋值给Props类型”的报错。
• 其次是定义位置不合理：原本用于生成动态样式的styles函数，因为结构错误被包裹在组件内部的未闭合作用域中，既会导致解析异常，也会造成每次组件渲染时重复创建函数的不必要性能消耗。

动态向StyleSheet传递Props的逻辑本身完全可行，StyleSheet原生支持接收动态计算的样式值，按照以下结构调整即可正常运行：

1. 将动态生成样式的函数定义在组件外部，避免作用域混乱和重复定义
2. 保证样式生成函数的入参类型和自定义的Props类型完全对齐
3. 在组件内部调用样式生成函数，传入解构得到的颜色Props，绑定到TouchableOpacity的style属性上

修正后的完整可运行代码：

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

type Props = {
  backgroundColor: string;
  borderColor: string;
};

// 外部定义动态样式生成函数
const createButtonStyles = ({ backgroundColor, borderColor }: Props) =>
  StyleSheet.create({
    container: {
      backgroundColor,
      borderColor,
    },
  });

export const CustomButton = ({
  backgroundColor,
  borderColor,
}: Props) => {
  // 组件内部根据传入的props生成对应样式
  const styles = createButtonStyles({ backgroundColor, borderColor });
  return (
    <TouchableOpacity style={styles.container}>
    </TouchableOpacity>
  );
};

补充说明：如果不需要保留StyleSheet.create的哈希优化能力，也可以直接将动态值写在内联style中，效果完全一致，写法更简洁：

<TouchableOpacity
  style={{ backgroundColor, borderColor }}
>
</TouchableOpacity>

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