标签: react-navigation-stack

I am developing a React native application for learning purposes. I am now implementing navigation using React Navigation. I am using stack navigation. But I cannot find a way to remove the previous screen from navigation history and kill the app.

I set up my navigation like this.

const AppStack = createStackNavigator({
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Events: {
    screen: Events
  }
});

如您在上面的代码中看到的，默认情况下，我打开登录屏幕。登录后，我将打开“事件”屏幕，如下所示。

this.props.navigation.navigate('Events');

问题是，当我进入事件页面时，可以在导航栏中看到后退按钮。当我按下它时，我被带回到登录页面。

但是我想要的是，登录后，我想从堆栈中删除登录页面。当我在活动页面上时，当我单击“后退”按钮时，应关闭该应用程序。也许它可能没有后退按钮。在这种情况下，它就像第一个屏幕一样。我怎样才能做到这一点？

我遇到了一个问题，我基本上没有关于如何继续前进的想法。

我有一个带有两个屏幕的 StackNavigator，一个称为“HomeScreen”，另一个称为“SettingsScreen”。当我点击一个按钮时，我会进入“SettingsScreen”。

我还有一个 DrawerNavigator，我可以使用它导航到四个屏幕之一，屏幕 4 是 StackNavigator。

DrawerNavigator:
  Screen1
  Screen2
  Screen3
  Screen4
    - HomeScreen
    - SettingsScreen

（希望它以某种方式可以理解）

所以让我们来解决这个问题......
我的问题是我的“SettingsScreen”具有将项目添加到 AsyncStorage 键的功能（它将它推送到数组，所以最后我有一个列表，我在我的“主屏幕”上呈现)，但是当我添加了该项目并返回到我的“主屏幕”时，它不会重新加载页面。我怎样才能让它在满足某些条件甚至更简单时重新加载页面 - 每次离开“SettingsScreen”时如何重新加载页面？

我正在使用以下方式创建导航系统

StackNavigator -> DrawerNavigator -> （屏幕 A、屏幕 B、屏幕 C）

屏幕A是初始路线

屏幕 A 到屏幕 B 使用

this.props.navigation.navigate("Screen B")  //Working Fine

屏幕 B 到屏幕 C 使用

this.props.navigation.navigate("Screen C")  //Working Fine

在屏幕 C 中

this.props.navigation.goBack() //Not Working

但

this.props.navigation.goBack(null) //It's going to Screen A instead of Screen B

这里出了什么问题。

请帮助我谢谢。

我有一个堆栈导航，我想在 android 和 IOS 上启用滑动返回，这是我的代码

import {
  createStackNavigator,
  StackViewTransitionConfigs,
} from "react-navigation-stack";
import HomeScreen from "../../screens/Home/Home";
import CategoryScreen from "../../screens/Category/Category";
import SubCategoryScreen from "../../screens/SubCategory/SubCategory";
import ProductScreen from "../../screens/Product/Product";

const ShopStack = createStackNavigator(
  {
    Shop: {
      screen: HomeScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    Category: {
      screen: CategoryScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    SubCategory: {
      screen: SubCategoryScreen,
    },
    Product: {
      screen: ProductScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
  },
  {
    headerMode: "none",
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,

    defaultNavigationOptions: {
      gesturesEnabled: true, …

有许多类似的问题已得到解答，但没有一个使用最新的反应导航版本。我想在按后退按钮时从“文档”屏幕转到“主页”屏幕。这是我尝试过的，但它不起作用。

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Camera" component={CameraScreen} />
    <Stack.Screen name="Document" component={Document} options={{
      headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
    }} />
  </Stack.Navigator>
</NavigationContainer>

编辑以获得更多说明：我的应用程序从“主页”开始，然后转到“相机”，然后转到“文档”。现在，当我按下手机的后退按钮时，我不想在进入“文档”时返回“相机”，而是直接返回“主页”。根据文档，这是如何覆盖后退按钮。

<Screen
  name="Home"
  component={HomeScreen}
  options={{
  headerLeft: (props) => (
   <HeaderBackButton
     {...props}
     onPress={() => {
       // Do something
     }}
   />
 ),

}}/>；但我不知道如何使用上面的代码去“主页”。所以我搜索了类似的问题，其中大多数都有navigationOptions其他内容。我尝试遵循以下问题的答案。

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}

所以是的，即使我使用 console.log，后退按钮也没有响应

HomeStackNavigator(stack)
---HomeTabsNavigator(Tab)
   ---FirstTab(stack)
      ---CreatePost(screen)
      ---Posts(Tab)
         ---Following(screen)
         ---Feed(screen) <----- functional component in here, lets call it component1
   ---SecondTab
      ...
---Screen2

我希望能够从提要屏幕中的功能组件导航到屏幕 2。我尝试查看 React Native 文档中的嵌套导航文档，但没有成功。

我已经使用react-navigation版本5创建了嵌套导航，但是当选项卡屏幕渲染时我需要隐藏顶部栏，我已经按照这里的步骤https://reactnavigation.org/docs/hiding-tabbar-in-screens/但仍然不起作用

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {navigationRef} from './NavigationService';

import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Stack = createStackNavigator();

const homeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

const HomeStack = () => …

我正在尝试在屏幕标题标题的右侧渲染一个按钮。但我没有得到想要的结果。我参考了react-navigation官方文档。这是我的屏幕截图。
这是我的导航的代码片段。

 <NavigationContainer>
            <Stack.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.header.backgroundColor,
                },
                headerTintColor: Colors.header.fontColor,
                headerTitleAlign: 'left',
                headerTitleStyle: {
                    fontSize: Fonts.size.regular
                }
            }}>
                <Stack.Screen name='Home' component={Home} options={{
                    headerTitle: 'Seguro',
                    headerRight: () => {
                        <Button              // I want to render this button
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    }
                }} />
                <Stack.Screen name='Login' component={Login} />
            </Stack.Navigator>
        </NavigationContainer>

我有一个自定义标头组件：

function CustomHeader() {
    return (
       <View style={{ height: headerHeight }}>
          {/* Some buttons in a row... */}
          <View 
            style={{ 
              position: "absolute",
              alignSelf: "center",
              top: headerHeight/2
            }} 
          />
       </View>
    )
}

正如您所看到的，我绝对将视图定位在标题的中心，顶部为 headerHeight/2。

为了获得标题高度，我正在做：

 import { useHeaderHeight } from "@react-navigation/elements";

 const headerHeight = useHeaderHeight();

但是...它返回我 0，就像我在堆栈导航器中所做的那样：

 screenOptions={{
    headerShown: false,
 }}

因为，我正在屏幕内渲染自定义标头。

我怎么解决这个问题？我需要获取堆栈导航器中使用的默认标题高度，以便对我的组件进行风格化。

我的底部选项卡导航有问题。这是屏幕结构：

• 主选项卡：
  • 选项卡A
    • 屏幕A1
  • 标签B
    • 屏幕B1
    • 屏幕B2

我可以从屏幕 A1 导航到屏幕 B2（更改选项卡）。我可以从屏幕 B1 导航到屏幕 B2。

这是示例代码：

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const TabAScreen1 = ({ route, navigation }) => {
  return (
    <View>
      <Text>Tab A screen 1</Text>
      <Button
        title="Go to tab B screen 2"
        onPress={() => { …