React Native Paper 文本输入更改颜色答案

【问题标题】：React Native Paper Text input change colorReact Native Paper 文本输入更改颜色
【发布时间】：2020-09-09 08:32:22
【问题描述】：

这是我使用 React Native Paper 生成文本输入的 React Native 代码。

import * as React from 'react';
import { TextInput } from 'react-native-paper';

class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
      />
    );
  }
}

它将生成以下文本输入：

如何将“输入标签”的文本颜色从蓝色变为红色？

这是官方文档：https://callstack.github.io/react-native-paper/1.0/text-input.html，但似乎找不到将颜色从蓝色变为红色的方法。

【问题讨论】：

标签： reactjs react-native react-native-paper

【解决方案1】：

根据他们的文档，您必须更改Theme。如果您想在任何地方替换蓝色，您可以在此处更改原色：

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff0000',
  },
};

您还应该能够仅通过以下方式修改输入的颜色：

<TextInput theme={{ colors: { primary: #ff0000 } }}/>

【讨论】：

【解决方案2】：

我有这个主题，但它不会改变输入的颜色

export const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: '#000000',
    primary: '#1cb0f6',
    secondary: '#e5e5e5',
    error: '#f13a59',
  },
}

你可以这样改变：

 <Input
    style={styles.input}
    selectionColor={theme.colors.primary}
    underlineColor="transparent"
    mode="outlined"
    theme={{ colors: { primary: theme.colors.primary } }}
    {...props}
  />

【讨论】：