你好,我想添加底部选项卡页内的顶部选项卡 所以我想要屏幕,而不是底部的选项卡标题, 我想要显示可以移动到另一个屏幕的顶部选项卡,

这是我的零食代码屏幕:https://snack.expo.dev/@aza1200/material-top-tabs-navigator-%7C-react-navigation

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}


const TopTab = createMaterialTopTabNavigator();
const BottomTab = createBottomTabNavigator();

const TopTabNavigator = () => {
  <TopTab.Navigator >
    <TopTab.Screen name="Post Room" component={FeedScreen} />
    <TopTab.Screen name="Rooms" component={NotificationsScreen} />
  </TopTab.Navigator>
}

export const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator screenOptions={{headerShown: false}}>
        <TopTab.Screen name="Top Tabs will" component={TopTabNavigator} />
        <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}


export default App; 

这是我的代码和 这将是非常有帮助的,如果有人让我知道如何修复以下代码. 谢谢.

推荐答案

尝尝这个

    import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Notifications!</Text>
    </View>
  );
}

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createBottomTabNavigator();

const TopTabNavigator = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name="Post Room" component={FeedScreen} />
      <TopTab.Screen name="Rooms" component={NotificationsScreen} />
    </TopTab.Navigator>
  );
};

export const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator screenOptions={{headerShown: false}}>
        <TopTab.Screen name="Top Tabs will" component={TopTabNavigator} />
        <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
};

export default App;

仅在TopTabNavigator中添加回车.

React-native相关问答推荐

任务:react-native-async-storage_async-storage:generateReleaseRFile FAILED

useState 函数似乎阻止了 Animated.timing 事件?

React-Native:无法从我的 android 应用程序打开设备设置

加载作为props传递的图像

在选项卡更改时react-navigation

React-native 解码 base64 编码字符串

使用 react-native 设置 Select 器的高度

如何在 React Native 中访问原生 UI 组件的实例方法

由于端口 8081 sunproxyadmin,无法打包 react native

无法加载 exp:// 出了点问题

在Android上更改高度时react-native TextInput显示错误

有react-native复选框的例子吗?

加载远程图像失败后加载本map像

如何知道 FlatList 中的滚动状态?

expo 已过期卸载并再次运行以升级

无法解析模块react-native-reanimated

如何在本机代码(Java、ObjectiveC/Swift)中读取 AsyncStorage

安卓启动问题:Unsupported class file major version 57

React Native 构建命令失败:PhaseScriptExecution ... (domain=NSPOSIXErrorDomain, code=2)

如何在 React Native 中强制禁用 iOS 暗模式