适用于 Android 的 React Navigation Stack Navigator 返回按钮样式答案

【问题标题】：React Navigation Stack Navigator Back Button Styling for Android适用于 Android 的 React Navigation Stack Navigator 返回按钮样式
【发布时间】：2017-08-09 09:14:38
【问题描述】：

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

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

这是当前问题的图像：

【问题讨论】：

标签： react-native react-navigation stack-navigator

【解决方案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'
})

顺便说一句，不是在标题样式中处理状态栏高度，而是在根组件中呈现 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);

【讨论】：

对，发现我的项目版本还不支持。我通过使用视图和状态栏高度解决了这个问题。感谢您为我指明正确的方向！

【解决方案2】：

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

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

class App extends React.Component {

  render() {
    return (

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

    );
  }
}

【讨论】：

当我发表这篇文章时，功能并不存在。
但是，谢谢你的回答，我相信它会在未来帮助其他人。它只是与问题无关。