Android的React导航堆栈导航器后退按钮样式

Question

我已经实现了Stack Navigator，如下所示：

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

现在，当我从NotesScreen转到AddNoteScreen时，我会按预期得到后退箭头。不过，我使用以下AddNoteScreen

为navigationOptions设置了标题

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相同的样式？

这是当前问题的图像：

Answer 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而不是处理标题样式中的状态栏高度，只需在根组件中呈现react-native的StatusBar组件，如

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);

Answer 2

为什么不在Android中隐藏状态栏？ ：

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

class App extends React.Component {

  render() {
    return (

     <View style={{flex : 1}}>
       <StatusBar hidden = {true}/>
       <Search/>
     </View>

    );
  }
}