React Native中使用StackNavigator时设置默认字体的问题

不用愁，StackNavigator本身确实是个配置式的导航器，没法直接加构造函数，但我们可以把它包裹在一个自定义组件里，这样就能用构造函数（或者函数组件的useEffect）来设置全局默认字体了。下面给你两种可行的方案：

方案1：用类组件包裹StackNavigator #

把你的StackNavigator放在一个类组件的render方法里，然后在这个类的构造函数里执行字体设置代码：

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import { Text } from 'react-native';
import Module1 from './components/Module1';
import Module2 from './components/Module2';
import Module3 from './components/Module3';

// 先定义你的StackNavigator
const AppNavigator = StackNavigator({
  Module1: { screen: Module1 },
  Module2: { screen: Module2 },
  Module3: { screen: Module3 },
});

// 用类组件包裹导航器，在这里设置字体
class App extends Component {
  constructor(props) {
    super(props);
    // 这里放robertmylne提供的字体设置代码
    Text.defaultProps = Text.defaultProps || {};
    // 合并原有默认样式，避免覆盖其他默认属性
    Text.defaultProps.style = {
      ...Text.defaultProps.style,
      fontFamily: '你的自定义字体名称'
    };
  }

  render() {
    return <AppNavigator />;
  }
}

export default App;

方案2：用函数组件+useEffect（更适合现代React写法） #

如果你的项目用的是函数式组件，可以用useEffect钩子在组件挂载时设置字体，效果和构造函数一样：

import React, { useEffect } from 'react';
import { StackNavigator } from 'react-navigation';
import { Text } from 'react-native';
import Module1 from './components/Module1';
import Module2 from './components/Module2';
import Module3 from './components/Module3';

const AppNavigator = StackNavigator({
  Module1: { screen: Module1 },
  Module2: { screen: Module2 },
  Module3: { screen: Module3 },
});

const App = () => {
  useEffect(() => {
    // 应用启动时设置一次全局默认字体
    Text.defaultProps = Text.defaultProps || {};
    Text.defaultProps.style = {
      ...Text.defaultProps.style,
      fontFamily: '你的自定义字体名称'
    };
  }, []); // 空依赖数组确保只执行一次

  return <AppNavigator />;
};

export default App;

注意事项 #

• 确保你的自定义字体已经正确链接到React Native项目里，不然设置了也不会生效。
• 如果某个Text组件自己写了fontFamily样式，会覆盖这个全局默认设置，这是正常的样式优先级规则。

内容的提问来源于stack exchange，提问作者kojow7