Question

我正在编写一个本机应用程序，其中99％的文本将Lato作为默认字体。

我知道我可以像这样设置Text组件的fontFamily：

<Text style={{
  fontFamily: 'Lato-Regular'
}}>Home page.</Text>

但是我不想在每个Text组件上重复我自己。

有没有一种定义全局文本样式的方法，这样我可以使用Text而不总是设置样式选项，或者让我创建自己的Text组件？

处理此问题的最佳方法是什么？

注意：如果这很重要，我正在使用expo。

Answer 1

创建一个GlobalStyle.js

从“ react-native”导入{尺寸};

const _colorSet = {
  // buttonColor: '#CEA991',
  buttonColor: '#f90b05',
  btnBlue: '#00ffff',
  buttonColorDark: '#90786D',
  separatorGray: '#ECECEC',
  mainBgColor: '#F5F5F5',
  deleteRed: '#E1312B',
  black: '#000000',
  white: '#FFFFFF',
  whiteLight: '#f5f5f5',
  WhiteGrey: '#fafafa',
  red: '#FF0000',
  btnRed: '#f90b05',
  btnBorder: '#f90601',
  txtRed: '#fa0f09',
  ModifierRed: '#f90601',
  BtnFB: '#596eb7',
  appBlack: '#686868',
  transparent: 'transparent',
  mainBgColorSemiTransparent: '#F5F5F588',
  green: '#00FF00',
  bgBlack: '#202023',
  grey: '#757575',
  LightGrey: '#666666',
  BorderGrey: '#e5e5e5',
};

const _fontSet = {
  Regular: 'Lato-Regular',
  Bold: 'Lato-Bold',
  SemiBold: 'Lato-SemiBold',
  Lite: 'Lato-Light',
  ExtraBold: 'Lato-ExtraBold',
};

const GlobalStyle = {
  colorSet: _colorSet,
  fontSet: _fontSet,
  windowW: WINDOW_WIDTH,
  windowH: WINDOW_HEIGHT,
  catItemSize: 90,
};

export default GlobalStyle;

然后创建CommonStyle.js

import { StyleSheet, Platform, StatusBar } from 'react-native';
import GlobalStyle from './GlobalStyles';


const CommonStyle = StyleSheet.create({

TextStyle: {
   fontSize:16,
   fontFamily: GlobalStyle.fontSet.Regular,// where regular will be 'Lato Regular'
   color: GlobalStyle.colorSet.txtRed,
  },


});

然后像这样开始使用它

import CommonStyle from '../../utils/CommonStyles';

<Text style={[CommonStyle.TextStyle]}>Home page.</Text>

然后享受。...

如何在react-native中设置全局文本样式？

1 个答案: