如何在反應導航中放置后退箭頭按鈕

Question

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

您會看到我只需要使后箭頭位於頂部，因為在我當前的選項卡中，箭頭位於導航選項卡的中心（垂直），這看上去很難看。 有什么幫助嗎？

Answer 1

您不能直接更改自動后退箭頭的樣式。 但是，您可以使用自定義組件覆蓋后退箭頭，如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;