将本机应用样式反应到所有文本组件答案

【问题标题】：react native apply styles to all Text Components将本机应用样式反应到所有文本组件
【发布时间】：2016-12-10 16:08:55
【问题描述】：

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

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

【问题讨论】：

标签： react-native

【解决方案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。进一步阅读请参阅this documentation。 （注意：上面的 MyText 组件是 functional stateless component 用于轻量级定义。）

【讨论】：

【解决方案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-native 库中的原生文本。

现在，您只需将导入更改为：

import Text from 'YOUR_PATH/Text.js'

希望这会有所帮助。

【讨论】：

onPress 在上述实现后对不起作用。所以应该用

【解决方案3】：

https://github.com/Ajackster/react-native-global-props 似乎为大多数 React Native 组件（包括 Text、View 等）提供了全局样式。来自 GitHub 的自述文件有示例。这似乎可以满足需求，但我尚未对此进行测试。

【讨论】：

【解决方案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这样的库

您还可以按照这些技巧来保持样式表简单易读。
参考Tips for styling React

【讨论】：

这对我的问题没有帮助。当使用 Text 组件时，每个用户都需要确保在整个代码库中提供正确的样式。我要求一个通用的解决方案，例如为特定标签提供 HTML 中的 css。似乎唯一的解决方案是创建一个自定义组件，例如我在问题中提到的 MyText。
@sumanj 你能接受我的回答还是自己输入一个来标记这个问题并帮助其他面临同样问题的人？

【解决方案5】：

在您的 Global-Styles js 文件中：

import React from "react";
import {
  Text as RNText
} from "react-native";

const styles = {
  text: {
    lineHeight: "1.5em",
    fontSize: "1.125rem",
    marginVertical: "0.2em",
    textAlign: "center"
  }
}

export var Text = (props) => <RNText style={[styles.text, props.style]}>{props.children}</RNText>

用法（与普通文本相同）：

import {Text} from './StyledComponents'

...
<Text style={{marginTop: '20px', color: 'red'}}>Hello, World!</Text>

【讨论】：

【解决方案6】：

您可以创建一个新组件并在其中应用您想要的任何修改。

class MyText extends Component {
    render() {
        return <Text {...this.props}
                     style={[this.props.style, style.commonTextStyle]}>{this.props.children}</Text>;
    }
}

不要忘记添加 {...this.props}。这样您就可以将所有道具传递给您正在定义的新组件。

【讨论】：

【解决方案7】：

Glamorous 在 React Native 中也处理得非常干净：

const MyText = glamorous.Text({
  // ... any styles
});

export MyText;

【讨论】：