我們如何將反應導航標題的標題集中起來？

React-navigation文檔還很年輕，閱讀這些問題對我來說並不是很有用（對每個版本的更改）是否有任何人有工作方法可以在React Native中使用react-navigation在Android中居中？我們如何將反應導航標題的標題集中起來？

來源

2017-04-10 jsdario

這可能有一些解決方案，但是我在我的項目中做了什麼，我沒有使用react-navigation中的標題和選項卡。對於標題我使用自定義標題（******的反應導航選項卡的性能不是那麼好*********）。 –

Theres''titleStyle'props可用於造型。你試過了嗎？以下是[鏈接]（https://github.com/react-community/react-navigation/search?utf8=&&======q=titleStyle）。檢查'StackNavigator.md' –

我做了，我試圖設置默認道具到所有屏幕，它沒有工作：/ – jsdario

使用headerTitleStyle：

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

來源

2017-07-11 06:36:46 Val

您可以設置爲Android的標題標題中心堆棧導航的使用此文件的變化作出反應導航：

node_modules\react-navigation\src\views\Header.js

更改此代碼在Header.js文件： -

title: { 
bottom: 0, 
left: TITLE_OFFSET, 
right: TITLE_OFFSET, 
top: 0, 
position: 'absolute', 
alignItems: Platform.OS === 'ios' ? 'center' : 'center', 
},

來源

2017-05-29 09:38:09

-1

確保在導致堆棧溢出之前檢查問題，通常更有幫助。 issue regarding your problem但正如himanshu在評論中所說，你需要訪問標題樣式屬性來調整標題的方式。

static navigationOptions = { 
    header: (navigation) => ({ 
     title: <Text style={{ 
      color: 'rgba(0, 0, 0, .9)', 
      fontWeight: Platform.OS === 'ios' ? '600' : '500', 
      fontSize: Platform.OS === 'ios' ? 17 : 18, 
      alignSelf: 'center' 
     }}>Filters</Text>, 
     right: <SearchButton />, 
     left: <CancelButton />, 
    }) 
    };

正如問題所示，我相信你已經設法找到一個解決方案，因爲這是前一陣子。但對於任何遇到此問題的人來說，這可能會有所幫助。

來源

2017-05-29 11:39:59 TomTom

接受的答案只適用於我，如果沒有一個出現在左側的後退按鈕。在這種情況下，您需要在右側設置一個空視圖來正確居中。

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

來源

2018-02-08 15:49:16 Rawa

這是我最經常做的，但我覺得這是一個解決方法，不應該是視爲正確答案。無論如何，我已經投入了它，因爲它很方便。 – jsdario

我完全同意這是一種解決方法，我希望它不是。但我認爲還沒有合適的解決方案。希望它很快就會被修復。 – Rawa

我們如何將反應導航標題的標題集中起來？

回答

相關問題