7

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

  1. 如何更改react-native中所有文本组件的颜色？最佳实践是什么？创建一个自己的带有样式的 Text 组件并在任何地方重用它？

  2. 更改TextInput的默认文本颜色。我设法更改了占位符颜色，以及android中的下划线颜色，但我找不到任何关于如何更改输入文本颜色（保持黑色）的信息。

  3. 我可以更改所有内容的字体/文本颜色吗？似乎缺少此选项。

感谢您的帮助和欢呼

4

2 回答 2

3

为了获得一致的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; },
};

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

import { Text } from 'AppNameLibrary';

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

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

于 2016-08-10T15:19:25.330 回答
1

你有两个选择：

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

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

Text除非您创建库的分支react-native并修改Text. 我不推荐这种方法。

于 2016-08-10T15:07:00.467 回答