React导航返回屏幕为什么要删除标题和底部选项卡

Question

您可以在下面找到更多详细信息。index.js app.js package.json nothing more index.js app.js package.json nothing react导航回滚不起作用。保持在同一页上，并删除页眉和页底。然后它就冻结了我不能点击任何东西

​

 /**
     * @format
     */
    import React from 'react';
    import {AppRegistry} from 'react-native';
    import App from './App';
    import {name as appName} from './app.json';
    import 'react-native-gesture-handler'

       
    AppRegistry.registerComponent(appName, () => App);

    import * as React from 'react';
    import { Button, View, Text } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';

    function HomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to Details"
            onPress={() => navigation.navigate('Details')}
          />
        </View>
      );
    }

    function DetailsScreen() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen</Text>
        </View>
      );
    }

    const Stack = createNativeStackNavigator();

    function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

    export default App;



    //package.json
    {
      "name": "smartiq",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint ."
      },
      "dependencies": {
        "@react-native-community/blur": "^3.6.0",
        "@react-native-community/datetimepicker": "^3.5.2",
        "@react-native-community/masked-view": "^0.1.11",
        "@react-native-community/netinfo": "^7.0.0",
        "@react-native-picker/picker": "^2.2.0",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/material-bottom-tabs": "^6.0.9",
        "@react-navigation/material-top-tabs": "^6.0.6",
        "@react-navigation/native": "^6.0.6",
        "@react-navigation/native-stack": "^6.2.5",
        "@reduxjs/toolkit": "^1.6.2",
        "axios": "^0.24.0",
        "react": "17.0.2",
        "react-native": "0.66.3",
        "react-native-gesture-handler": "^1.10.3",
        "react-native-modalize": "^2.0.12",
        "react-native-pager-view": "^5.4.9",
        "react-native-paper": "^4.10.0",
        "react-native-portalize": "^1.0.7",
        "react-native-reanimated": "^2.3.0-beta.3",
        "react-native-safe-area-context": "^3.3.2",
        "react-native-screens": "^3.9.0",
        "react-native-svg": "^12.1.1",
        "react-native-tab-view": "^3.1.1",
        "react-native-ui-lib": "^6.3.0",
        "react-native-vector-icons": "^9.0.0",
        "react-redux": "^7.2.6",
        "redux": "^4.1.2",
        "styled-components": "^5.3.3"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.12.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-jest": "^26.6.3",
        "eslint": "7.14.0",
        "jest": "^26.6.3",
        "metro-react-native-babel-preset": "^0.66.2",
        "react-test-renderer": "17.0.2"
      },
      "jest": {
        "preset": "react-native"
      }
    }

​

我在应用程序中的页面之间切换，当我单击back按钮时，只有内容出现，底部选项卡和顶部标题丢失。Please check gif

Answer 1

您需要在代码中创建一个包含顶部和底部内容的组件

并且您需要调用组件。