Question

我几天前开始使用react-native工作，经过一些广泛的搜索，我无法找到2个（简单？）问题的答案：

如何更改react-native中所有文本组件的颜色？什么是最佳做法？使用创建自己的Text组件造型和重复使用它？
更改 TextInput 的默认文字颜色。我设法改变了占位符颜色，以及android中的下划线颜色，但我无法找到有关如何更改输入文本颜色的任何内容（停留黑色）。
无论如何，我可以更改所有内容的字体/文字颜色吗？这个似乎缺少选项。

感谢您的帮助和欢呼

Answer 1

为了获得Text元素（或React Native应用程序中使用的任何其他基本元素）的一致样式，我们的团队已开始为我们的应用程序构建一个组件库，以匹配样式和命名。由我们的设计团队组织的风格指南。

例如，您的文本组件如下所示：

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',
};

以这种方式创建文本组件，您可以定义可用的样式，并向开发人员发出警告，告知他们是否使用了PropTypes定义的有效样式。

我们还希望能够从您需要的任何文件中轻松地引用此库中的组件，因此我们为主库文件提供了一个名称，其中包含一些内部React Native组件的providesModule注释使用。

主库文件看起来像这样。

/**
 * @providesModule AppNameLibrary
 */

module.exports = {
    get Text() { return require('./Text').default; },
};

然后您只需要在任何需要自定义Text组件的组件文件中导入它。

import { Text } from 'AppNameLibrary';

这是一种方法。不确定它是不是最好的方式，但这是我们团队构建组件的好方法，因此它们的设计始终符合我们的风格指南。

只要更改Android TextInput组件的文本颜色，只需将color: 'orange'指定为样式，就可以将文本更改为橙色。我们此时正在使用RN 0.28。

Answer 2

您有两种选择：

使用您需要的默认样式创建您自己的Text组件，并在任何地方重复使用它。（就像你提到的那样）
创建一个可全局访问的StyleSheet对象，并在每个Text组件中使用它。

我认为＃1是最佳选择。尽管交换了所有<Text/>的开销，但它为您项目的未来提供了更好的灵活性。

除非您创建Text库的分支并修改react-native的源代码，否则无法更改所有现有Text组件。我不推荐这种方法。

全局“文本”颜色和“TextInput”文本颜色

2 个答案: