web-dev-qa-db-ja.com

反応ナビゲーションヘッダーのタイトルを中央に配置するにはどうすればよいですか？

React-navigation docsはまだ若く、問題を読むことは私にとってはあまり機能していません（各バージョンの変更）Android using react-navigation in React Native？

react-nativereact-native-androidreact-navigation
14
jsdario

headerTitleStyle を使用します。

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

enter image description here

2019/03/12に変更：

2018年、react-navigation v2リリース（2018年4月7日）後、何らかの理由でalignSelfが機能しなくなりました。ここでは、 headerLayoutPreset を使用した新しい作業方法です。 @HasanSHから：

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {screen: Main},
}, {headerLayoutPreset: 'center'});
28
Val

ヘッダータイトルを中央に配置するには、flexプロパティを追加してフレックスヘッダーを作成する必要があります。

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}
38
Cong Nguyen

受け入れられた答えは、左側に戻るボタンがない場合にのみ機能します。その場合は、空のビューを右側に設定して、適切に中央に配置する必要があります。

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}
19
Rawa

それを行うための最良の方法は、ドキュメントにリストされているものを実装することです：StackNavigatorConfig内で、次のようにオプションのプロパティを割り当てます。

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset-ヘッダーコンポーネントのレイアウト方法を指定します。

これを行うことで、スタイリングを台無しにする必要はまったくありません。そして、そのスタック内のすべてのネストされた画面に適用されます。

ソース を確認してください

17
Hasan Sh

これは私のために働いた:)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

3
Pavitha

これはAndroid＆iOS：

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};
1
Dodi
navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

ここに 。 => {flex:1 ,textAlign: 'center' and alignSelf: 'center'}私のために働く！

1
Akshita Agarwal

headerTitleContainerStyle を使用します

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}
1
Omri Givoni

中央に反応ナビゲーションヘッダーのタイトルを設定します。 headerTitleStyle CSSを使用します。

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };
1
Asif vora
headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}
1
Akhila Antony

HeaderLayoutPreset： 'center'をcreateeStackNavigator関数に追加する必要があります。

これが1つの真の方法です。

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

参照： https://github.com/react-navigation/react-navigation/pull/4588

1
Daniel S.

これは間違いなくAndroidで動作します

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },
0
M.Hassam Yahya