Как изменить семейство шрифтов в 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>  
       } 
   }
});

Answer 3

переименуйте ваш шрифт в том месте, где он был сохранен, и правильно свяжите его, затем используйте react-native link, используйте правильное имя шрифта и используйте его.