为什么我在 Stack Navigator 中看不到任何渲染内容？

Question

我有这个文件，除了屏幕顶部的标题，我什么都看不到，呈现：

import React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack'
import CreateSessionScreen from '../screens/CreateSessionScreen';
import CompletedSessionsScreen from '../screens/CompletedSessionsScreen';

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

function Hello() {
  return (
    <View>
        <Text 
          style={{
          flex: 1, 
          fontSize: 100, 
          height: 80, 
          width: 80, 
          borderColor: 'black', 
          borderWidth: 1, 
          justifyContent: 'center',
          alignItems: 'center'}}>
            Hello World
          </Text>
          <Button title='click me'>Click me</Button>
    </View>
  );
}

function AppNavigator() {
  return (
    <NavigationContainer >
      <Stack.Navigator>
        <Stack.Screen name="Hello" component={Hello} />
        <Stack.Screen name="Completed Sessions" component={CompletedSessionsScreen} />
        <Stack.Screen name="CreateSessionScreen" component={CreateSessionScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

出于某种原因，我看不到任何渲染到屏幕上的东西。 我可以在组件中抛出一个 console.log 以确保它正在呈现。 我导入了几个组件，然后将 Hello 组件放在同一个文件中进行故障排除，并且无法渲染

Answer 1

问题在于您的fontSize = 100并且与此相比，您的高度/宽度非常小。 将其更改为 10，看看会发生什么。

 function Hello() {
  return (
    <View
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
      }}>
      <Text>
        Hello World
      </Text>
      <Button title="click me">Click me</Button>
    </View>
  );
}