ReactNative 使用react-navigation Android 標題欄標題居中適配

weixin_33797791發表於2017-07-19

原因


在使用react-navigation設定標題欄的標題過程中發現,在iphone上標題欄的標題為居中狀態,而在Android上則是居左對齊。當有headerLeft或者headerRight設定後,中間的標題會根據剩餘的空間居中顯示。所以需要我們修改原始碼,進行適配。


修改原始碼


  1. 【node_modules -- react-navigation -- src -- views -- Header.js】的326行程式碼處,修改為如下:
 title: {  
   bottom: 0,  
   left: TITLE_OFFSET,  
   right: TITLE_OFFSET,  
   top: 0,  
   position: 'absolute',  
   alignItems: 'center',  
  1. 註釋掉170行的內容
// if (Platform.OS === 'android') {
    //   if (!options.hasLeftComponent) {
    //     style.left = 0;
    //   }
    //   if (!options.hasRightComponent) {
    //     style.right = 0;
    //   }
    // } }

相關文章