ReactNative：在ReactNavigation中添加BottomTab組件

我是 react-native 的新手，我想將 bottomtab 集成到現有代碼中。

下面的代碼是一個簡單的應用程式，其中包含兩個螢屏主頁和設定。對于導航，我使用的是React Navigation庫。

但我的問題是如何將 bottomTab 集成到下面的現有代碼中。

請在下面找到代碼。

應用程式.js

import React from "react";
import { StyleSheet, SafeAreaView, StatusBar, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import MyStacks from "./src/routes/MyStacks";
import { openDatabase } from "react-native-sqlite-storage";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator()

const Home = () => {
    return (
        <Text>Home Screen</Text>
    );
}

const Settings = () => {
    return (
        <Text>Settings Screen</Text>
    );
}

const App = () => {
    
    return (
        <SafeAreaView style={styles.container}>
          <NavigationContainer>
            <StatusBar barStyle="light-content" backgroundColor="#11998e" />
            <Stack.Navigator screenOptions={{ headerShown: false }}>
                <Stack.Screen name="Home" component={Home} />
                <Stack.Screen name="Settings" component={Settings} />
            </Stack.Navigator>
          </NavigationContainer>
        </SafeAreaView>
    );
}

export default App;

包.json

{
  "name": "SimpleApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native link && react-native run-android",
    "installReleaseAPK": "react-native run-android --variant=release",
    "ios": "react-native run-ios",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "lint": "eslint .",
    "export": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ && cd android && ./gradlew assembleDebug"
  },
  "dependencies": {
    "@react-native-picker/picker": "^2.2.1",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-ionicons": "^4.6.5",
    "react-native-neat-date-picker": "^1.1.4",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-sqlite-storage": "^6.0.1",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^9.0.0"
  },
  "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"
  }
}

請幫我解決這個問題

uj5u.com熱心網友回復：

您可以使用Tab 導航，您只需更改您的Stack.NavigationforTab.navigation

uj5u.com熱心網友回復：

您需要使用嵌套導航器。這是官方檔案中的一個示例，完全符合您的要求：

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

嵌套導航器意味著在另一個導航器的螢屏內渲染一個導航器

標籤：

上一篇：意外的標記陳述句-ReactNative

下一篇：將正確的值傳遞給moment.js`toDate()function`