函数作为 React child React Native 无效

Question

我遇到下一个错误“Functions are not valid as a React child React Native”，我试图在按下图像时显示抽屉我的 header（使用 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
    }
})

函数作为 React child React Native 无效

Functions are not valide as a React child React Native

react-native

react-navigation

react-navigation-drawer

react-navigation-stack