React Native中如何修改按钮内单个文字的颜色

你的现有CustomButton组件仅支持传入纯字符串作为text属性，因此无法单独为"Register"设置差异化颜色。以下是两种可行的解决方式，推荐第一种更灵活的方案：

方案一：改用children子元素传递文本（推荐） #

修改组件，放弃固定的text属性，转而接受children，让调用方完全控制文本的样式组合：

const CustomButton = ({ onPress, type = "PRIMARY", bgColor, fgColor, fontColor, children }) => {
  return (
    <Pressable 
      onPress={onPress} 
      style={[
        styles.container, 
        styles[`container_${type}`],
        bgColor ? { backgroundColor: bgColor } : {},
      ]}>
      {/* 直接渲染自定义子元素 */}
      {children}
    </Pressable>
  );
};

登录页面调用时，直接组合带不同样式的Text组件：

<CustomButton 
  onPress={onSignUpPressed} 
  type="TERTIARY"
>
  <Text style={{ color: "#000000" }}>Don't have an account? </Text>
  <Text style={{ color: "#165DFF" }}>Register</Text>
</CustomButton>

优势：

• 支持任意数量的文本片段与样式组合，扩展性极强
• 保留原组件所有交互与容器样式逻辑，改动最小
• 符合React组件设计的原生思路

方案二：扩展text属性支持富文本数组 #

如果希望保留原有的text属性，可以让它接受包含文本内容和样式的数组，在组件内部循环渲染：

修改组件：

const CustomButton = ({ onPress, text, type = "PRIMARY", bgColor, fgColor, fontColor }) => {
  return (
    <Pressable 
      onPress={onPress} 
      style={[
        styles.container, 
        styles[`container_${type}`],
        bgColor ? { backgroundColor: bgColor } : {},
      ]}>
      <Text 
        style={[
          styles.text, 
          styles[`text_${type}`],
          fgColor ? { color: fgColor } : {},
          fontColor ? { color: fontColor } : {},
        ]}>
          {/* 判断text类型，数组则渲染多段文本 */}
          {Array.isArray(text) ? 
            text.map((item, index) => (
              <Text key={index} style={item.style}>
                {item.content}
              </Text>
            )) : 
            text}
      </Text>
    </Pressable>
  );
};

登录页面调用：

<CustomButton 
  onPress={onSignUpPressed} 
  type="TERTIARY" 
  fontColor="#000000"
  text={[
    { content: "Don't have an account? ", style: {} },
    { content: "Register", style: { color: "#165DFF" } }
  ]}
/>

特点：

• 无需大幅改动原有调用习惯
• 支持基础的富文本样式，但灵活性不如children方案

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