全球“文本” color和“TextInput”文字颜色 [英] Global "Text" color and "TextInput" text color
问题描述
我几天前开始使用react-native，经过一些广泛的搜索，我无法找到2个（简单？）问题的答案：
I've started to work with react-native few days ago and after some extensive search I weren't able to find answers for 2 (simple?) questions:
-
如何更改react-native中所有 Text 组件的颜色？
最佳做法是什么？使用
样式创建自己的Text组件并在任何地方重复使用？
How can I change the color of ALL Text components in react-native? What are the best practices? Creating an own Text component with styling and reusing it everywhere?
更改 TextInput 的默认文本颜色。我设法更改
占位符颜色，以及android中的下划线颜色，但是我
找不到任何关于如何更改输入文本颜色的内容（保持
黑色）。
Change the default text color of TextInput. I managed to change the placeholder color, and also the underline color in android, but I can't find anything on how to change the input text color (stays black).
感谢您的帮助和欢呼
推荐答案
为了获得 Text 元素（或React Native应用程序中使用的任何其他基本元素）的一致样式我们的团队已经开始为我们的应用程序构建一个组件库，它们与我们的设计团队整合的样式指南的样式和命名相匹配。
In order to get consistent styling of Text elements (or any other basic element used in a React Native app) our team has started building out a library of components for our app that match the styles and naming of the style guide put together by our design team.
例如你的文本组件看起来像这样：
For example your text component would look like this:
import React, { PropTypes, Component } from 'react';
import ReactNative from 'react-native';
export default class Text extends Component {
getProps() {
const { fontSize, fontWeight } = this.props;
return {
fontSize,
fontWeight,
};
}
render() {
return (
<ReactNative.Text {...this.getProps()}>{this.props.children}</ReactNative.Text>
);
}
}
Text.propTypes = {
fontSize: PropTypes.oneOf([
25,
20,
15,
]),
fontWeight: PropTypes.oneOf([
'normal',
'bold',
]),
};
Text.defaultProps = {
fontSize: 20,
fontWeight: 'normal',
};
以这种方式创建文本组件，您可以定义可用的样式，并向开发人员发出警告t使用带有 PropTypes 定义的有效样式。
Creating your text component this way you can define what styles are available and show developers warning if they don't use a valid style with the PropTypes definitions.
我们还希望此库中的组件能够成为很容易从你需要的任何文件引用，所以我们给主库文件一个名称，其中包含一些内部React Native组件使用的 provideModule 注释。
We also wanted components in this library to be able to be easily referenced from whatever file you needed them in and so we gave the main library file a name with the providesModule comment that some of the internal React Native components use.
主库文件看起来像这样。
The main library file looks something like this.
/**
* @providesModule AppNameLibrary
*/
module.exports = {
get Text() { return require('./Text').default; },
};
然后你只需要在任何需要自定义文本组件的组件文件中导入它。
Then you just need to import it in whatever component file you need the custom Text component.
import { Text } from 'AppNameLibrary';
这是一种方法。不确定这是否是最佳方式，但这是我们团队构建组件的好方法，因此它们的设计始终符合我们的风格指南。
That is one way to do it. Not sure if it's the best way, but it's a good way our team has come to build out components so they are designed consistently in a way that matches our style guide.
至于更改Android TextInput组件的文本颜色，只需将颜色：'orange'指定为样式，将文本更改为橙色。我们此时正在使用RN 0.28。
As far as changing the text color of the Android TextInput component, just assigning a color: 'orange' as a style, changed the text to orange for me. We're using RN 0.28 at this point.
这篇关于全球“文本” color和“TextInput”文字颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
