对所有文本组件应用原生样式

Question

是否有一种简单的方法可以将样式应用于特定类型的所有组件，例如Text或ScrollView>等，以响应本地构建模板
例如，我希望对所有场景中的所有文本组件使用verdanafontFamily样式。有没有比每次使用Text组件时指定样式更容易实现的方法
还是需要创建自定义文本组件？并使用它代替基本组件，如下面的示例。使用MyText代替文本

const MyText = ({data}) => <Text style={style.commonTextStyle}>{data}</Text>




Answer 1

https://github.com/Ajackster/react-native-global-props似乎为大多数反应本地组件（包括文本、视图等）提供了全局样式。GitHub自述中有一些示例。这似乎解决了需要，但我还没有测试过。

Answer 2

您必须创建如下所示的 RN 组件：

/* @flow */

import React, { Component } from 'react';
import { Text as TextRN } from 'react-native';

export default class Text extends Component {
  render() {
    return (
      <TextRN style={[YOUR_CUSTOM_STYLES, this.props.style]}>
        {this.props.children}
      </TextRN>
    )
  }
}

这样，您自己的Text组件可以从您使用它们的任何位置继承其他样式。

注意：请记住，不能在所有情况下都使用您自己的自定义文本组件，例如在TouchableHighlight中，在这些情况下，您必须使用来自react本地库的本地文本。

现在，您只需更改导入内容：

import Text from 'YOUR_PATH/Text.js'

希望这有所帮助。

Answer 3

除了Vicky的答案之外，您还可以简单地创建一个名为Text或MyText等的新组件，并在需要时将其导入您的项目。

function MyText(props) {
  return (
    <Text style={styles.MY_CUSTOM_STYLES}>
      {props.children}
    </Text>
  );
}

然后像这样使用它，

import MyText from '/path/to/MyText';

...

render() {
  return ( <MyText>Now I have my custom styles.</MyText> );
}

如果您习惯于定义文本组件，您可以通过更改其名称将其用作导入文本。请参阅此留档以进一步阅读。（请注意：上面的MyText组件是用于轻量级定义的功能无状态组件。）