web-dev-qa-db-ja.com

React Navigation createStackNavigatorでフォントファミリを変更する方法

アプリのナビゲーターコンポーネントとしてReact Navigationを使用しています。スタックナビゲーターのフォントファミリーを変更したいのですが、現在iOSのフォントファミリーを変更するためにこれを行っています。

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

Androidデバイスでは機能しません。Androidでも機能するようにコードを変更するにはどうすればよいですか？

react-nativereact-navigationstack-navigator
6
Banafshe Alipour

ありがとう、私はそれをこのように使用し、それはうまくいった

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

追加 fontWeight: "200"をheaderTitleStyleに追加すると機能します。

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

デフォルトのフォントの太さは500で、その太さの適切なフォントが見つからなかった場合は、代わりにデフォルトのフォントが読み込まれます。

3
Aref Aslani

私は通常、次のコードでナビゲーションヘッダーのフォントを変更しました。

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

注：ibarra-regularは、私が使用したサンプルカスタムフォントファミリーです。楽しみました！これがあなたのコードにとってうまくいくことを願っています

1
AndriyFM

保存した場所でフォントの名前を変更し、適切にリンクしてからreact-native linkおよびフォントの正しい名前を使用し、それを使用します。

0
Tanveerbyn