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

您不能直接更改自动后退箭头的样式。但是，您可以使用自定义组件覆盖后退箭头，如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;

如何在反应导航中放置后退箭头按钮

1 个答案: