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

Question

是否有样式应用到如特定类型的所有组件的简单方法Text或ScrollView等在反应原产于建立模板？
例如,我希望将verdana fontFamily样式用于所有场景中的所有Text组件.有没有一种简单的方法来实现,而不是每次使用Text组件时指定样式？
或者是否需要创建自定义文本组件？并使用它代替基本组件,如下面的例子.用MyText而不是Text

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

Answer 1

除了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> );
}

如果您习惯于定义Text组件,可以通过更改其名称将其用作导入Text.有关进一步阅读,请参阅此文档.(注意:上面的MyText组件是轻量级定义的功能无状态组件.)

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>
    )
  }
}

通过这种方式，您自己的文本组件可以从您使用它们的任何地方继承其他样式。

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

现在，您只需更改导入：

import Text from 'YOUR_PATH/Text.js'

希望这可以帮助。

Answer 3

https://github.com/Ajackster/react-native-global-props似乎为大多数 react native 组件提供了全局样式，包括文本、视图等。 GitHub 上的自述文件有示例。这似乎解决了需求，但是我还没有对此进行测试。

Answer 4

您可以提取常见样式并将其作为全局样式提供。如果需要，您可以添加/编辑每个文本视图的样式。

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

然后你可以使用<Text style={[styles.welcome, {color:'red'}]]}>Hello</Text>

你应该研究像react-native-extended-stylesheet这样的库

您还可以遵循这些技巧来保持样式表简单易读。
请参阅React 样式提示