时间戳

首页 > 解决方案 > 如何创建自定义文本 - 反应原生

javascript - 如何创建自定义文本 - 反应原生

问题描述

我现在完成了我的项目，我想将我的自定义字体设置为所有Text组件。

我认为最好的方法是创建一个自定义Text组件并将其替换为react-native.

现在如何创建Text具有默认样式的自定义组件？

标签： javascriptreact-native

解决方案

为了实现这一点，您需要有一个反应原生组件，一旦实例化，它就可以通过样式或其他属性进行配置。

例如，您可以CustomText像这样让您的自定义反应原生组件：

1.功能组件

如果您更喜欢新方法并且将其与钩子一起使用，请使用此部分：

// CustomText.js    
import React from 'react';
import {
  Text,
  StyleSheet,
} from 'react-native';

export default function CustomText(props) {
  return (
    <Text style={[styles.defaultStyle, props.style]}>
      {props.children}
    </Text>
  );
}

const styles = StyleSheet.create({
  // ... add your default style here
  defaultStyle: {
  },
});

2.类组件

如果您更喜欢使用类的旧方法，请使用此部分：

// CustomText.js    
import React from 'react';
import {
  Text,
  StyleSheet,
} from 'react-native';

export default class CustomText extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Text style={[styles.defaultStyle, this.props.style]}>
        {this.props.children}
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  // ... add your default style here
  defaultStyle: {
  },
});

然后在您的主要组件上导入并调用该自定义组件，如下所示：

import CustomText from './CustomText';
//... other imports go here.

// in the render method you call your CustomText component.
render(){

//...
  <CustomText style={{ fontWeight: 60, }}>
    This is custom Text
  </CustomText>
}

注意：如果您只想更改样式，我认为@Yanush 解决方案最适合这种情况。

我希望这是有帮助的。

推荐阅读