为什么我的 StackNavigator 没有显示任何内容？

Question

我正在创建一个 React Native 应用程序，并且我想使用 React Navigation 中的 Stack Navigator（我之前已经这样做过，所以我对它并不完全陌生）。但是，当我添加到导航器中时，没有任何呈现。

我的组件是：

import React from 'react';
import {SafeAreaView, ScrollView, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {AppProvider} from './src/stores/app-context';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <AppProvider>
        <SafeAreaView>
          <ScrollView>
            <Stack.Navigator>
              <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
          </ScrollView>
        </SafeAreaView>
      </AppProvider>
    </NavigationContainer>
  );
}

这仅显示一个空白屏幕。

但是，如果我直接添加

HomeScreen

组件，它就可以工作：

import React from 'react';
import {SafeAreaView, ScrollView, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';

import {AppProvider} from './src/stores/app-context';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <AppProvider>
        <SafeAreaView>
          <ScrollView>
            <HomeScreen />
          </ScrollView>
        </SafeAreaView>
      </AppProvider>
    </NavigationContainer>
  );
}

在第二种情况下，它会按预期显示文本“主屏幕”。

AppProvider

包含这个：

import React from 'react';
import {AppReducer} from './app-reducer';
import {IAppState, IAppAction, INIT_STATE} from './app-types';

const AppContext = React.createContext<{
  appState: IAppState;
  appDispatch: React.Dispatch<IAppAction>;
}>({
  appState: INIT_STATE,
  appDispatch: () => null,
});

const AppProvider = ({children}: any) => {
  const [appState, appDispatch] = React.useReducer(AppReducer, INIT_STATE);

  return (
    <AppContext.Provider value={{appState, appDispatch}}>
      {children}
    </AppContext.Provider>
  );
};

export {AppContext, AppProvider};

（

IAppAction

、

AppReducer

等只是接口等；我不相信它们是相关的）。

我显然做错了什么，但我看不出它是什么。有人可以建议吗？

Answer 1

import React from 'react';
import {SafeAreaView, ScrollView, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';

import {AppProvider} from './src/stores/app-context';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <AppProvider>
        <SafeAreaView style={{flex:1}}>
          <ScrollView>
            <HomeScreen />
          </ScrollView>
        </SafeAreaView>
      </AppProvider>
    </NavigationContainer>
  );
}

将 flex 添加到 SafeAreaView 并开始显示主屏幕