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

Question

我是新来的反应本地人，我在玩反应导航。我对导航选项卡中后箭头的定位有问题.我想瞄准后箭头来定位它。

以下是我迄今所做的工作

​

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 }
  }
}

​

你看，我只需要把后箭头定位在顶部，因为在我当前的选项卡中，箭头位于导航选项卡(垂直)的中心，看起来很难看。有什么帮助吗？

Answer 1

不能直接更改自动后箭头的样式。但是，您可以使用自定义组件覆盖后箭头，如论反应导航文档所解释的那样。这篇文章是关于酒吧的右边部分，但正如在最后一部分中所述，同样适用于酒吧的左边，在那里箭头是放置的。

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

如果您不喜欢"Back“标签，可以使用npm安装反应-本机矢量图标，并修改前面的代码，如

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;