Блог

Я хочу настроить выделенный цвет метки ввода текста на бумаге react native в исходном состоянии (не в фокусе). Это мой компонент 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('');
  

Скриншот моей программы, если я не нажимаю на ввод:

Это скриншот для нажатия на ввод:

Как вы можете видеть, цвет имени пользователя метки черный. Я хочу установить для этого значение white. При нажатии на нее все работает как ожидалось, но начальное состояние цвета метки — это не то, что я хочу.

Я попытался решить эту проблему с помощью заполнителя. Я добавил реквизиты заполнителя к OutlinedInput и изменил цвет заполнителя на белый, но в этом случае заполнитель не стал выделенным. Когда я пробовал что-либо с заполнителем, оно не выделялось.

Как я могу настроить цвет метки, чтобы она отображалась как белая после открытия программы?

Для настройки цвета метки в React Native Paper v5 необходимо обновить этот реквизит:

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

Я не понимаю, почему они сделали это таким несерьезным и недоступным (этого даже нет в их документах).

Вам необходимо заменить TextInput свойство:

placeholderTextColor='white'

с помощью:

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

Обновить :

Его «На поверхности: ‘белый'»