如何设置全局文本样式在反应原生？[复制]

Question

我正在编写一个react原生应用程序，其中99%的文本将使用Lato作为默认字体。

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

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

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

是否有一种方法可以定义全局文本样式，这样我就可以使用＜code＞文本

最好和推荐的处理方法是什么？

注意：我正在使用展览，以防这很重要。

Answer 1

创建一个 GlobalStyle.js

import { Dimensions } from '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>

享受。。。。