如何在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

添加fontWeight: "200"到headerTitleStyle它将起作用。

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

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

Answer 2

谢谢，我是这样用的，效果很好

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