Изменить цвет текста TextInput в React Native Paper

Question

Как изменить цвет текста TextInput в React Native Paper без переноса в PaperProvider?

В настоящее время это работает:

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: "orange",
  }
};

<PaperProvider theme={theme}>
  <TargetComponent />
</PaperProvider>

Однако я хочу контролировать цвет текста через пропущенные реквизиты из родительского компонента. Странно, мимоходом backgroundColor работает но color не.

Удаление PaperProvider упаковка также не помогает.

Это соответствующий код в TargetComponent:

return (
    <View style={styles.container}>
      <TextInput
        type="outlined"
        style={this.props.style}
        onChangeText={this.props.onChange}
        label={this.props.label}
        value={this.props.value || "Replace this text"}
        placeholder={this.props.placeholder}
      />
    </View>
)

this.props.style является:

{
    color: "orange", // This does not work
    backgroundColor: "transparent" // This works
},

Answer 1

Нашел решение. Но для тех, кто в том же положении:

По какой-то причине color не признается style поддержать, хотя другие, как backgroundColor, являются.

Просто пройти theme в качестве опоры TextInput, В этом theme объект назначает цвет текста следующим образом:

      <TextInput
        type="outlined"
        style={{ ...styles.textInput, ...this.props.style }}
        underlineColor={this.theme.colors.primary}
        onChangeText={this.props.onChange}
        label={this.props.label}
        value={this.props.value || "Replace this text"}
        placeholder={this.props.placeholder}
        theme={{ colors: { text: this.props.style.color } }}
      />

Answer 2

theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}

Answer 3

Просто добавьте эту строку theme={{colors: {text: 'Your Color' }}}к <TextInput/>нативной бумаги React.

              <TextInput
            placeholder= {'Some Text'}
            theme={{
              colors: {
                    text: 'white',
                 }
           }}

Answer 4

Если вы хотите изменить цвет фона по умолчаниюlightThemeдляTextInput, вы можете установитьsurfaceVariant: "white".

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

Для более четкого понимания ознакомьтесь с документацией по теме по адресу https://callstack.github.io/react-native-paper/docs/guides/theming.

         const lightTheme = {
      ...MD3LightTheme,
      colors: {
        ...MD3LightTheme.colors,
        surfaceVariant: "white",
      },
      roundness: 1.5,
    };

Answer 5

      <TextInput
    type="outlined"
    style={this.props.style}
    onChangeText={this.props.onChange}
    label={this.props.label}
    value={this.props.value || "Replace this text"}
    placeholder={this.props.placeholder}
    theme={{ colors: { text: 'white' } }}
  />

просто добавьте цвет --- theme={{ colors: { text: 'your_color' } }}