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

hwamh0ep  于 2023-03-31  发布在  React
关注(0)|答案(3)|浏览(392)

我几天前开始使用react-native,经过广泛的搜索,我无法找到2个(简单?)问题的答案:
1.如何在react-native中更改所有Text组件的颜色?最佳实践是什么?创建一个带有样式的文本组件并在任何地方重用它?
1.更改TextInput的默认文本颜色。我设法更改了android中的占位符颜色和下划线颜色,但我找不到任何关于如何更改输入文本颜色(保持黑色)的内容。
1.是否可以更改所有的字体/文本颜色?此选项似乎缺失。
谢谢你的帮助,干杯

u91tlkcl

u91tlkcl1#

为了获得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组件的文本颜色,只需指定color: 'orange'作为样式,就可以将文本更改为橙子。此时我们使用RN 0.28。

5hcedyr0

5hcedyr02#

您有两种选择:
1.使用所需的默认样式创建您自己的Text组件,并在任何地方重用它。
1.创建一个可全局访问的StyleSheet对象,并在每个Text组件中使用它。
我认为#1是最好的选择。尽管交换所有<Text/>的开销很大,但它为项目的未来提供了更好的灵活性。
除非创建react-native库的一个分支并修改Text的源代码,否则没有办法更改所有现有的Text组件。我不推荐这种方法。

q5iwbnjs

q5iwbnjs3#

您可以在android中设置全局文本颜色
步骤1.首先打开styles.xml文件。文件位置/android/app/src/main/res/values/styles.xml
步骤2.在样式标签<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>

相关问题