React Native中CustomText组件导入后props不生效问题求助

NativeWind 默认仅对 React Native 原生组件（如 <Text>）处理 className 样式编译，自定义组件需要显式配置才能让 className 生效；另外原组件未传递剩余 props 给内部 <Text>，也可能导致样式传递异常。

方案1：使用 NativeWind 的 styled 包装组件 #

NativeWind 的 styled 函数可将原生组件包装为支持 Tailwind 样式的自定义组件，自动处理 className 编译逻辑：

import { styled } from 'nativewind';
import { Text } from 'react-native';

// 用styled包装原生Text组件，使其支持NativeWind样式
const StyledText = styled(Text);

interface CProps {
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  children?: React.ReactNode;
  className?: string;
  // 兼容Text组件的所有原生props
  [key: string]: any;
}

const CustomText = ({ weight = 400, className, children, ...props }: CProps) => {
  // 简化字体后缀映射逻辑
  const weightSuffixMap: Record<number, string> = {
    100: 'Thin',
    200: 'ExtraLight',
    300: 'Light',
    400: 'Regular',
    500: 'Medium',
    600: 'SemiBold',
    700: 'Bold',
    800: 'ExtraBold',
    900: 'Black',
  };

  return (
    <StyledText
      {...props}
      className={className}
      style={{
        fontFamily: `Poppins_${weight}${weightSuffixMap[weight]}`,
      }}
    >
      {children}
    </StyledText>
  );
};

export default CustomText;

方案2：传递所有 props 给内部原生 Text 组件 #

如果不想使用 styled，可以确保将自定义组件的所有 props（包括 className 和 Text 原生 props）传递给内部 <Text>，同时合并样式：

import { useEffect } from "react";
import { Text, TextProps } from "react-native";

// 扩展TextProps，添加自定义weight属性
interface CProps extends TextProps {
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
}

const CustomText = ({ weight = 400, className, children, ...props }: CProps) => {
  useEffect(() => {
    console.log(className);
  }, []);

  const weightSuffixMap: Record<number, string> = {
    100: 'Thin',
    200: 'ExtraLight',
    300: 'Light',
    400: 'Regular',
    500: 'Medium',
    600: 'SemiBold',
    700: 'Bold',
    800: 'ExtraBold',
    900: 'Black',
  };

  return (
    <Text
      {...props}
      className={className}
      style={{
        fontFamily: `Poppins_${weight}${weightSuffixMap[weight]}`,
        // 合并原生style与自定义style，避免样式覆盖
        ...props.style,
      }}
    >
      {children}
    </Text>
  );
};

export default CustomText;

1. 确保 babel.config.js 已正确配置 NativeWind：

module.exports = {
  presets: [
    'babel-preset-expo', // 或你使用的其他React Native预设
    'nativewind/babel'
  ],
};

2. 确认 Poppins 字体已正确链接到项目中，否则 fontFamily 设置会失效。

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