如何将React Native Paper TextInput的输入标签文字颜色从蓝色改为红色？

嘿，我来帮你搞定这个问题！虽然v1.0的文档里没直接标注对应的修改项，但有几种实用方法能把TextInput的标签（Email）改成红色：

方法一：自定义renderLabel组件 #

这是最灵活的方式，直接替换默认标签组件，完全掌控样式：

import * as React from 'react';
import { TextInput } from 'react-native-paper';
import { Text } from 'react-native';

class MyComponent extends React.Component {
  state = { text: '' };
  render(){
    return (
      <TextInput 
        value={this.state.text} 
        onChangeText={text => this.setState({ text })}
        renderLabel={() => <Text style={{ color: 'red', fontSize: 16 }}>Email</Text>}
      />
    );
  }
}

方法二：通过自定义主题统一修改 #

如果你希望多个组件的标签颜色保持一致，可以自定义React Native Paper的主题，覆盖默认的primary色（默认标签使用的是主题主色）：

import * as React from 'react';
import { TextInput, Provider as PaperProvider } from 'react-native-paper';

const customTheme = {
  colors: {
    primary: 'red', // 主题主色改为红色，会影响所有使用primary的组件
  },
};

class MyComponent extends React.Component {
  state = { text: '' };
  render(){
    return (
      <PaperProvider theme={customTheme}>
        <TextInput 
          label='Email'
          value={this.state.text} 
          onChangeText={text => this.setState({ text })}
        />
      </PaperProvider>
    );
  }
}

方法三：直接通过style属性修改（适配部分版本） #

在一些较新的React Native Paper版本中，你可以直接在style里嵌套标签样式，v1.0版本可自行验证：

<TextInput
  label='Email'
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
  style={{ label: { color: 'red' } }}
/>

推荐优先用第一种方法，既能单独修改当前输入框的标签颜色，又不会影响其他组件的样式。

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