函数作为 React 子 React Native 无效

Question

我有下一个错误“Functions are not valid as a React child React Native”，当我按下标题中的图像时，我试图显示一个抽屉（使用 react-navigation-stack 库创建)，然后我使用react-navigation-drawer。到目前为止一切正常，当我尝试将变量导航传递给我的函数以在createStackNavigator 中使用时，问题就开始了，我不知道传递这个变量的正确方法是什么。

I want some like this image

    import React from 'react';
    import {TouchableOpacity, Image} from "react-native";
    import {createDrawerNavigator} from "react-navigation-drawer";
    import {createStackNavigator} from 'react-navigation-stack';

    //IMPORT SCENES
    import HomeScreen from "../scenes/Home";
    import UpdateProfileScreen from "../scenes/home/UpdateProfile";

    const HomeStack = ({navigation}) => createStackNavigator(
        {
                Home: HomeScreen,
                UpdateProfile: UpdateProfileScreen,
            },
            {
                initialRouteName: 'Home',
                defaultNavigationOptions: ({
                    headerLeft: () =>
                        <TouchableOpacity style={{alignItems: 'flex-end', margin: 16}}
                                          onPress={() => navigation.openDrawer()}>
                            <Image style={{width: 24, height: 24}} source={require('../images/open-menu.png')}/>
                        </TouchableOpacity>
                })
            }
        )

    export default DrawerNavigator = createDrawerNavigator({
        HomeStack
    })

如何解决这个问题，我是 React Native 的新手。

Answer 1

用这个替换你的HomeStack：

const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  UpdateProfile: {
    screen: UpdateProfileScreen
  },
},{
  initialRouteName: 'Home',
  defaultNavigationOptions: ({navigation}) => ({ // change here
    headerLeft: () =>
      <TouchableOpacity style={{ alignItems: 'flex-end', margin: 16 }}
        onPress={() => navigation.openDrawer()}>
        <Image style={{ width: 24, height: 24 }} source={require('../images/open-menu.png')} />
      </TouchableOpacity>
  })
})

和

用这个替换你的DrawerNavigator：

export default DrawerNavigator = createDrawerNavigator({
    HomeStack: {
      screen: HomeStack
    }
})