javascript - 为什么我的组件不在我的 Tab.Screen 中呈现？

Question

我已经连接了一个简单的底部选项卡导航器，但我不确定如何让组件在其中呈现。我相信我已经遵循了文档示例，所以我不确定如何继续。

我有一个组件 AppNavigator，它具有以下内容：

import React from 'react';
import { NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import CreateSessionScreen from '../screens/CreateSessionScreen';
import CompletedSessionsScreen from '../screens/CompletedSessionsScreen';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  return (
    <NavigationContainer >
      <Tab.Navigator initialRouteName={CompletedSessionsScreen}>
        <Tab.Screen name="Completed Sessions" component={CompletedSessionsScreen} />
        <Tab.Screen name="Create Session" component={CreateSessionScreen} />
      </Tab.Navigator>
  </NavigationContainer>
  );
}

它正在导入我要展示的两个组件，此时它们只是虚拟卡。我可以让卡片在 TabNav 之外渲染没有问题。

但是，在选项卡导航器中，我看到了选项卡（由于某种原因在顶部而不是底部），当我单击它们时，我可以看到选项卡的突出显示发生了变化，但没有任何内容呈现到屏幕上。

标签： javascriptreactjsreact-nativereact-native-navigation

Answer 1

有可能CompletedSessionsScreen并且CreateSessionScreen正在渲染为零宽度/高度。您可能想要设置styles={{ flex: 1 }}他们的最高视图。

像这样的东西：

export default () => {
  return (
    <View styles={{ flex: 1 }}> // <-- add it here
      { /* content */ } 
    </View> 
  );
}