如何在反应导航中定位后退箭头按钮答案

【问题标题】：How to position back arrow button in react navigation如何在反应导航中定位后退箭头按钮
【发布时间】：2019-03-24 16:52:40
【问题描述】：

我是 react-native 的新手，我正在玩 react-navigation。我在导航选项卡中定位后退箭头时遇到问题。我想定位后向箭头以定位它。

这是我到目前为止所做的事情

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',

    // this what I tried to implement
    headerTitleStyle: { position: 'absolute', top: 10 }
  }
}

您知道我只需要将后向箭头定位在顶部，因为在我当前的选项卡中，箭头位于导航选项卡的中心（垂直），看起来很难看。有什么帮助吗？

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 react-navigation

【解决方案1】：

您不能直接更改自动后退箭头的样式。但是，您可以使用自定义组件覆盖后退箭头，如 on React Navigation docs 所述。这篇文章是关于栏的右侧，但如上一部分所述，同样适用于栏的左侧，即放置箭头的位置。

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',
    headerLeft: (
      <Button onPress={() => navigation.goBack()} title="Back" />
    )
  }
}

如果你不喜欢“返回”标签，可以使用 npm 安装react-native-vector-icons 并修改之前的代码如

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',
    headerLeft: (
      <TouchableWithoutFeedback 
          style={{ /* Put your style here */}}
          onPress={() => navigation.goBack()} >
      >
          <Icon name="md-arrow-round-back" size={16} color="#000" />
      </TouchableWithoutFeedback>
    )
  }
}

别忘了导入图标

import Icon from 'react-native-vector-icons/Ionicons;

【讨论】：