Как расположить кнопку со стрелкой назад в реагирующей навигации

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

Вы не можете напрямую изменить стиль автоматической стрелки назад.Однако вы можете переопределить стрелку назад своим пользовательским компонентом, как объяснено в документах React Navigation .Эта статья о правой части бара, но, как указано в последней части, то же самое относится и к левой части бара, где расположена стрелка.

static navigationOptions = ({navigation}) => {
  return { 
    headerTitle: navigation.state.params.navTitle,
    headerStyle: {
      height: '45%',
      backgroundColor: '#ffae19'
    },
    headerTintColor: 'white',
    headerLeft: (
      <Button onPress={() => navigation.goBack()} title="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;