在 React Native Paper 中更改 TextInput 的文本颜色

Question

如何在不包装 PaperProvider 的情况下更改 React Native Paper 中 TextInput 的文本颜色？

目前有效：

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 作为 prop 传递给 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' }}}添加到React native paper的<TextInput/>即可。

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

在 React Native Paper 中更改 TextInput 的文本颜色

Change text color of TextInput in React Native Paper

react-native

react-native-paper