Блог

Проблема EXPO SDK 39 в React Navigation 5, почему задняя верхняя кнопка «<—» теперь всегда находится по умолчанию в правом верхнем углу, а не в обычном положении слева?

И как установить параметры навигации по стеку или вкладкам по умолчанию на всех страницах стека или вкладок?

неправильное место:

нужное место:

  export default function Rotas({navigation}) {
  return (
    <NavigationContainer>
      <Stack.Navigator
      options={{
        headerTitleAlign: 'center',
        headerLeftContainerStyle: {
          backgroundColor: 'red',
          transform: [{ rotate: '180deg' }],
          left: 308,
          
        }
        }} 
      > 
        <Stack.Screen /* Esta sera a homme screen, a primeira tela a ser carregada ao abrir o aplicativo */
        options={{
          
          title: 'Sweet Homme',
          headerTintColor: 'white',  /* Cor do texto */
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: 'purple', // Cor de fund0
           

          } 
        }}
        style={{color: 'red'}} name="Home" component={Home} />
        <Stack.Screen 
        options={{
          title: 'WRONG PLACE >>>',
          headerTintColor: 'aquamarine',  /* Cor do texto */
          headerTitleAlign: 'center',
        
          headerStyle: {
            backgroundColor: 'purple', // Cor de fund0
          } 
        }}

        name="Nice" component={Nice} />
        {/* Aplicar esse options no stack screen para fazer a seta voltar não ficar no lado direito do app...
        usando o stack navigator... */}
        <Stack.Screen name="Tela3" component={Tela3}
        options={{
        headerTintColor: 'blue',
        headerTitleAlign: 'center',
        headerLeftContainerStyle: {
          backgroundColor: 'purple',
          transform: [{ rotate: '180deg' }],
          left: 308,
          
        }
        }} />
    {/* Cada Stack.Screen é uma tela, uma pagina, a primeira pagina que o index 
    vai abrir é a que esta no topo desta função. */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
  

Удалите эти стили

 transform: [{ rotate: '180deg' }],
left: 308,
  

Итак, что происходит, так это то, что вы являетесь rotating контейнером заголовка, из-за чего кнопка «Назад» перемещается вправо.

<—— эта кнопка, повернутая на 180 градусов, станет ——>

Вы можете использовать headerRight для добавления пользовательского компонента справа от заголовка, если это то, что вам нужно.

Пожалуйста, прочитайте документы здесь https://reactnavigation.org/docs/header-buttons /