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

注意： ibarra-regular 是我使用的示例自定义字体系列。很喜欢！我希望这对您的代码能很好地发挥作用

Answer 3

在保存字体的位置重命名您的字体，然后使用react-native link正确链接它，并使用正确的字体名称并使用它。.

Answer 4

谢谢，我是这样使用的，而且有效

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

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

4 个答案: