Question

我的应用程序的主菜单中有一个TextInput，我已经更改了selectionColor，因此使用我的colourscheme可以更清楚地看到垂直条。

<TextInput
  //various settings
  selectionColor={white}
  //more settings
 />

随着应用程序的增长，我发现自己添加了越来越多的Textinputs，在每个Textinput中添加一行代码，每次创建一个新的一个，将它的选择颜色更改为白色似乎是多余的所以他们都匹配。

我想知道是否有任何方法可以更改它，因此我可以在每个Textinput中将selectionColor设置为白色，而无需为每个Textinput手动添加一行代码？

Answer 1

您可以制作自定义<WhiteTextInput />组件：

const WhiteTextInput = props => {
   return <TextInput {...props} selectionColor={white} />;
};

然后只需用<TextInput />;

替换所有<WhiteTextInput />

Answer 2

您可以像这样更改默认道具。在使用任何TextInput之前，请记住添加这些代码。然后将所有TextInput的selectionColor更改为“白色”。

import { TextInput } from 'react-native';

let originalTextInputDefaultProps = TextInput.defaultProps;
TextInput.defaultProps = {
  ...originalTextInputDefaultProps,
  selectionColor: 'white',
};

Answer 3

您可以为组件创建自定义组件。

import { TextInput } from 'react-native';


const AndrewsTextInput = (props) => {
return <TextInput {...props} selectionColor="white" />;
}

export { AndrewsTextInput };

然后将其导入您想要使用它而不是普通的TextInput。

Answer 4

要使其在整个应用程序中工作，您必须将此代码添加到 app.js 或任何地方

import { TextInput } from 'react-native';

let originalTextInputDefaultProps = TextInput.defaultProps;
TextInput.defaultProps = {
  ...originalTextInputDefaultProps,
  selectionColor: 'white',
};

如何更改React应用程序中所有文本输入的selectionColor

4 个答案: