【问题标题】:Global "Text" color and "TextInput" text color全局“文本”颜色和“文本输入”文本颜色
【发布时间】:2016-08-10 12:55:59
【问题描述】:

几天前我开始使用 react-native,经过大量搜索后,我无法找到 2 个(简单?)问题的答案:

  1. 如何更改 react-native 中所有 Text 组件的颜色? 最佳实践是什么?创建一个自己的文本组件 造型和在任何地方重复使用它?

  2. 更改 TextInput 的默认文本颜色。我设法改变了 占位符颜色,也是android中的下划线颜色,但我 找不到有关如何更改输入文本颜色的任何信息(停留 黑色)。

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

感谢您的帮助和欢呼

【问题讨论】:

    标签: android ios react-native react-native-text


    【解决方案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。

    【讨论】:

    【解决方案2】:

    你有两个选择:

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

    我认为#1 是最好的选择。尽管将所有&lt;Text/&gt; 换出会产生开销,但它为您的项目的未来提供了更好的灵活性。

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-03-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-25
    • 1970-01-01
    • 1970-01-01
    • 2013-09-23
    相关资源
    最近更新 更多