React Native Paper 文本输入 - 调整初始状态下的标签颜色

Question

我想在初始状态（不是 onFocus）调整概述的react-native-paper TextInput 标签颜色。这是我的 OutlinedInput 组件：

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

const OutlinedInput = (props) => {
  return (
    <TextInput
      mode='outlined'
      label={props.label}
      placeholder={props.placeholder}
      placeholderTextColor='white'
      secureTextEntry={props.secureTextEntry}
      multiline={props.multiline}
      keyboardType={props.keyboardType}
      value={props.value}
      onChangeText={(value) => props.onChangeText(value)}
      style={props.style}
      theme={props.theme}
    />
  );
};

export default OutlinedInput;

在我的 Register 组件中，我在其中创建了一个 OutlinedInput 组件：

<View style={{ justifyContent: 'center', alignItems: 'center' }}>
  <OutlinedInput
    label={'User Name'}
    value={userName}
    onChangeText={(userName) => setUserName(userName)}
    style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
            borderRadius: 5, width: '75%', height: '5%' 
    }}
    theme={{ colors: { text: 'white', primary: 'rgb(33, 151, 186)' } }}
  />
</View>

我在 Register 组件的顶部添加了这一行：

const [userName, setUserName] = useState('');

不点击输入时我的程序截图：

这是点击输入的截图：

可以看到，用户名标签的颜色是黑色。我想把它设置为白色。当点击它时，它按预期工作，但是标签颜色的初始状态不是我想要的。

我尝试使用占位符来解决这个问题。我向 OutlinedInput 添加了占位符道具，并将占位符颜色更改为白色，但在这种情况下，占位符没有变成轮廓。当我尝试任何有关占位符的内容时，它并没有被概述。

打开程序后如何调整标签颜色为白色？

Answer 1

为了调整 React Native Paper v5 中的标签颜色，您必须更新此属性：

theme={{
    colors: {
         onSurfaceVariant: 'white'
    }
}}

我不明白为什么他们把它做得如此不语义且难以访问（甚至不在他们的文档中）

Answer 2

您需要替换

TextInput

属性：

placeholderTextColor='white'

与：

theme={{
    colors: {
        placeholder: 'white'
    }
}}

Answer 3

更新：

它的“onSurface：‘白色’”

Answer 4

出于某种奇怪的原因，我能够定义轮廓 TextInput 设置属性的（未聚焦的）标签颜色：

主题={{ 颜色： { onSurfaceVariant：“白色” } }}

我永远不会想到 onSurfaceVariant 会解决这个问题，这是对几个道具和主题道具的大量尝试和错误。