2017-08-09 159 views
0

我實現了一個堆棧導航如下:陣營導航堆棧導航後退按鈕造型的Android

const MainNav = StackNavigator({ 
    notes: { screen: NotesScreen }, 
    addNote: { screen: AddNoteScreen } 
}, { 
    initialRouteName: 'notes' 
}); 

現在,當我從我的NotesScreen去我AddNoteScreen我得到的返回箭頭預期。不過,我已經使用以下navigationOptions稱呼我的頭爲AddNoteScreen

static navigationOptions =() => ({ 
    title: 'Add a note', 
    headerStyle: { 
     height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54, 
     backgroundColor: '#2196F3' 
    }, 
    headerTitleStyle: { 
     marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0, 
     color: 'white' 
    } 
}) 

現在headerTitleStyle不會影響Android上的後退箭頭。我怎樣才能讓Android上的後退箭頭採用與headerTitleStyle相同的樣式?

這是當前的問題的圖像:

Demo of the problem

回答

1

有一個在其可被用來改變後退按鈕圖標顏色navigationOptions屬性headerTintColor。除了現在沒有其他選項react-navigation v1.0.0-beta.11來自定義後退按鈕。

static navigationOptions =() => ({ 
    title: 'Add a note', 
    headerStyle: { 
     height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54, 
     backgroundColor: '#2196F3' 
    }, 
    headerTitleStyle: { 
     marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0, 
     color: 'white' 
    }, 
    headerTintColor: 'white' 
}) 

的BTW,而不是在標題樣式處理狀態欄的高度,只是使你的根組件內的反應本地狀態欄的組件如

import { 
    AppRegistry, 
    View, 
    StatusBar, 
} from 'react-native'; 

class AppWithStatusBar extends Component { 

    render() { 
    return(
     <View style={{flex: 1}}> 
     <StatusBar barStyle="light-content"/> 
     <MainNav /> 
     </View> 
    ); 
    } 
} 

然後使這個「AppWithStatusBar」組件

AppRegistry.registerComponent('your_app',() => AppWithStatusBar); 
+0

StatusBar不起作用:/ –

+0

對,發現我的項目版本還不支持。我解決了使用視圖和狀態欄高度的問題。感謝您指點我正確的方向! –