React Native Paper Text Input-在初始状态下调整标签颜色

问题描述

我想在初始状态（不是onFocus）调整概述的本机纸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('');

我的程序的屏幕快照（如果我不单击输入的话）：

这是单击输入的屏幕提示：

如您所见，标签User Name的颜色为黑色。我想将此设置为白色。单击它时，它可以按预期工作，但是标签颜色的初始状态不是我想要的。

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

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

解决方法

您需要替换TextInput属性：

placeholderTextColor='white'

具有：

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