如何在 React Navigation createStackNavigator 中更改字体系列

Question

我使用 React Navigation 作为我应用程序的导航器组件。我想更改堆栈导航器的字体系列。目前我这样做是为了更改 iOS 中的字体系列并且效果很好：

const LoggedInStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'payX',
      headerTitleStyle: {
        fontFamily: "my-custom-font"
      }
    }
  }
});

但它不适用于 Android 设备。我应该如何更改代码以使其在 Android 中也能正常工作？

Answer 1

在保存的地方重命名你的字体并link它正确然后使用react-native link并使用你的字体的正确名称并使用它..

Answer 2

将 fontWeight: "200" 添加到 headerTitleStyle 即可。

const LoggedInStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'payX',
      headerTitleStyle: {
        fontFamily: "my-custom-font",
        fontWeight: "200"
      }
    }
  }
});

默认字体粗细为 500，如果找不到具有该粗细的合适字体，它将改为加载默认字体。

Answer 3

谢谢，我是这样用的，效果不错

const LoggedInStack = createStackNavigator({
   Home: { 
       screen: Home, 
       navigationOptions: { 
       headerTitle: <Text style={{ textAlign: 'center', flex: 1, fontFamily: 
        'my-custom-font'}}>payX</Text>  
       } 
   }
});

Answer 4

我通常使用以下代码更改导航 header 字体：

const stackScreen = {
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      ....
      headerTitle: () => (
        <Text style={{ fontFamily: "ibarra-regular" }}>Home</Text>
      )
    }
  }
};

注意：ibarra-regular 是我使用的示例自定义字体系列。享受！我希望这适用于您的代码

如何在 React Navigation createStackNavigator 中更改字体系列

How to change font family in React Navigation createStackNavigator

react-native

react-navigation

stack-navigator