Изменить цвет текста TextInput в React Native Paper - PullRequest
1 голос
/ 02 мая 2019

Как изменить цвет текста 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
},

Ответы [ 2 ]

1 голос
/ 02 мая 2019

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

По какой-то причине 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 } }}
      />
0 голосов
/ 09 мая 2019
theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}
...