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

标签 react-native react-native-paper

如何在 React Native Paper 中更改 TextInput 的文本颜色而不用在 PaperProvider 中换行?

目前这有效:

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

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

但是我想通过从父组件传递的 Prop 来控制文本颜色。
奇怪,路过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
},

最佳答案

找到了解决办法。但对于那些处于同样困境的人:

出于某种原因color不被识别为 style支持即使其他人,如 backgroundColor , 是。

只需通过 theme作为 TextInput 的 Prop .在那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 } }}
      />

关于react-native - 在 React Native Paper 中更改 TextInput 的文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55958311/

相关文章:

javascript - 无法在 React Native Paper 中更改卡片标题文本的颜色

react-native - 输入每个字符后,我的 React Native 文本输入失去焦点

android - React Native Android Slider 无法在设备上垂直滑动

javascript - 当我在设备中运行 React Native 应用程序而不通过电缆连接到电脑时,它显示 2 个月前的应用程序状态

javascript - 我想从 React Native 中的 RSS 中获取按发布日期排序的数据

react-native - react native 三点菜单出现在左侧

reactjs - 我可以在屏幕上的多个位置重复使用组件的单个实例吗?

android - 如何在 Android 的主线程上运行 React Native 模块方法

reactjs - React Apollo 显示 "react-apollo only supports a query, subscription, or a mutation per HOC"错误

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