Question

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

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

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

Answer 1

要实现这一点，您需要拥有一个react native组件，该组件一旦实例化即可通过样式或其他属性进行配置。

例如，您可以像这样自定义反应本机组件CustomText：

// 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解决方案最适合这种情况。

我希望这会有所帮助。

Answer 2

this guide will help you on how to apply custom fonts,我一直在我的应用程序中使用该方法。 创建自定义文本组件

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

现在所有使用过的文件中，来自react native的文本均会从react native导入并添加

import Text from './path/to/component'

Answer 3

我建议使用样式而不是自定义组件，但这取决于您。在我的项目中，我创建了一个名为“ commonStyles.js”的文件，如下所示：

export default StyleSheet.create({
    textTitle: {
        fontSize: 20,
        color: '#dddddd',
        fontFamily: 'YourCustomFont',
    },
});

然后我将使用以下任何方式导入此文件：

import stylesCommon from './styles/stylesCommon';

，每个需要更改的文本应如下所示：

<Text style={stylesCommon.textTitle}>
This is my title
</Text>

如何创建自定义文本-反应本机

3 个答案: