首页 文章

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

提问于
浏览 次
6

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

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

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

  • 无论如何，我可以更改 everything 的字体/文字颜色吗？似乎缺少此选项 .

感谢您的帮助和欢呼

android ios react-native react-native-text

2 回答

  • 0

    为了获得 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 .

    回复于
  • 2

    你有两个选择：

    • 使用您想要的默认样式创建您自己的 Text 组件，并在任何地方重复使用它 . （就像你提到的那样）

    • 创建一个可全局访问的 StyleSheet 对象，并在每个 Text 组件中使用它 .

    我认为＃1是最好的选择 . 尽管将所有_562119交换掉了，但它为您项目的未来提供了更好的灵活性 .

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

    回复于

相关问题