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

Question

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

1. 如何更改react-native 中所有Text组件的颜色？什么是最佳做法？使用样式创建自己的Text组件并在任何地方重复使用它？

2. 更改TextInput的默认文本颜色.我设法改变了占位符颜色,也改变了android中的下划线颜色,但是我找不到任何关于如何更改输入文本颜色(保持黑色)的内容.

3. 无论如何我可以改变一切的字体/文字颜色吗？似乎缺少此选项.

感谢您的帮助和欢呼

Answer 1

您可以在android中设置全局文本颜色

步骤1.首先打开styles.xml文件。文件位置/android/app/src/main/res/values/styles.xml

步骤 2. 在 style 标签内添加此行 <item name="android:textColor">{Set your color}</item>

像这样

 <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
 </style>

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 Native 组件使用的注释。

主库文件看起来像这样。

/**
 * @providesModule AppNameLibrary
 */

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

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

import { Text } from 'AppNameLibrary';

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

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