此导航器缺少导航道具。在react-navigation v3和v4中，您必须直接设置您的应用程序容器

Question

我正在试图勾勒出导航器的轮廓，但获取导航道具缺少错误。Ive根据The Net Ninja的教程添加了所需的所有软件包它也成功导入了从'./screens/home'导入Home；已清空

import 'react-native-gesture-handler';
import React, {useState} from 'react';
import * as Font from 'expo-font';
import Home from './screens/home';
import { AppLoading } from 'expo';
import Navigator from './routes/homestack';


const getFonts = () => Font.loadAsync({
    'Lacquer-regular': require('./assets/fonts/Lacquer-Regular.ttf'),
    'Roboto-bold': require('./assets/fonts/Roboto-Bold.ttf')
  });



export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded){
  return (
   <Navigator />
  );
} else {
  return (
  <AppLoading 
    startAsync={getFonts}
    onFinish={()=> setFontsLoaded(true)}
  />
  )
   }
}

我的路线看起来像我正在使用React-Navigation的V4：

import { createStackNavigator} from 'react-navigation-stack';
import About from '../screens/about';

const screens = {
    About: {
        screen: About,
        navigationOptions: {
            title: 'About HorrorZone',
        }
    },
}

const AboutStack = createStackNavigator(screens, {
    defaultNavigationOptions: {
        headerTintColor: 'white',
        headerStyle: { backgroundColor: 'red' }
    }
});

export default AboutStack;

如果有任何帮助，Homestack文件的外观如何：

import { createStackNavigator} from 'react-navigation-stack';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const screens = {
    Homepage: {
        screen: Home,
        navigationOptions: {
            title: 'HorrorZone',
        }
    },
    ReviewDetails: {
        screen: ReviewDetails,
        navigationOptions: {
            title: 'Review Details',
        }
    } 
}

const HomeStack = createStackNavigator (screens, {
    defaultNavigationOptions: {
        headerTintColor: 'white',
        headerStyle: { backgroundColor: 'red' }
    }
});

export default HomeStack;

Answer 1

如果使用的是React Navigation V3，则必须直接使用容器。在V3中，createNavigationContainer重命名为createAppContainer。

V3的示例

import { createStackNavigator, createAppContainer} from 'react-navigation';

如果您使用的是React Navigation V4，则导航器已移至单独的存储库。您将需要从“ react-navigation-stack”安装和导入。

V4示例

import { createStackNavigator } from 'react-navigation-stack'

不同版本的React Navigation发生了许多重大变化。请看看。

https://reactnavigation.org/blog/#breaking-changes

Answer 2

您尚未将堆栈导航器包装到应用程序导航器中。请把您的HomeStack包裹在createAppContainer中，然后像这样导出它：

import { createAppContainer } from 'react-navigation'; // import this
import { createStackNavigator } from 'react-navigation-stack';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const screens = {
  Homepage: {
    screen: Home,
    navigationOptions: {
      title: 'HorrorZone',
    }
  },
  ReviewDetails: {
    screen: ReviewDetails,
    navigationOptions: {
      title: 'Review Details',
    }
  }
}

// store stack navigator in any variable
const stack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: 'white',
    headerStyle: { backgroundColor: 'red' }
  }
});

// create app container 
const HomeStack = createAppContainer(stack);

export default HomeStack;

AboutStack中进行了相同的更改。

注意：在导航器中多使用appContainer不好。不仅仅是创建一个路由器，它将所有堆栈导航器包装在一个appContainer中。