全局 "Text" 颜色和 "TextInput" 文本颜色

Question

几天前我开始使用 react-native，经过大量搜索后我找不到 2 个（简单的？）问题的答案：

如何在 react-native 中更改所有 Text 组件的颜色？最佳做法是什么？创建一个自己的文本组件设计样式并在各处重复使用？
更改 TextInput 的默认文本颜色。我设法改变了占位符颜色，还有 android 中的下划线颜色，但我找不到任何关于如何更改输入文本颜色的信息（停留黑色).
我可以更改 所有内容 的字体/文本颜色吗？这个似乎缺少选项。

感谢您的帮助和欢呼

Answer 1

您有两个选择：

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

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

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

Answer 2

为了使 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 定义的有效样式时向开发人员显示警告。

我们还希望这个库中的组件能够从您需要它们的任何文件中轻松引用，因此我们给主库文件一个带有 providesModule 注释的名称，一些内部 React本机组件使用。

主库文件看起来像这样。

/**
 * @providesModule AppNameLibrary
 */

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

然后你只需要将它导入到任何你需要自定义文本组件的组件文件中。

import { Text } from 'AppNameLibrary';

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

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

全局 "Text" 颜色和 "TextInput" 文本颜色

Global "Text" color and "TextInput" text color

android

ios

react-native

react-native-text