reactjs - React Native Paper 文本输入更改颜色

Question

这是我使用 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 但似乎找不到将颜色从蓝色变为红色的方法。

Answer 1

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

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

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

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

Answer 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}
  />