反应本机导航添加汉堡图标

Question

我试图在react-native上添加汉堡图标以打开抽屉。但是我收到此错误

对象作为React子对象无效（找到：带有键{left}的对象）。如果您打算渲染孩子的集合，请使用数组代替，或者使用React附加组件中的createFragment（object）包装对象。

Check the render method of `View`.

这是routes.js

import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';

const DrawerIcon = ({ navigate }) => {

return(
        <Icon
            name = "md-menu"
            size = {38}
            color = "black"
            style = {{paddingLeft : 20}}
            onPress = {() => navigate('DrawerOpen')}
/>

    );
};

export const Stack1 = StackNavigator({
    Screen1: {
        screen: screen1,
        navigationOptions: {
            header: ( props ) => ({
                left: <DrawerIcon { ...props } />
            }),
        }
    },
    Screen2: {
        screen: screen2,
    },
    Screen3: {
        screen: screen3,
    },



})

export const Drawer = DrawerNavigator({
    Home:{
        screen: Stack1,
        navigationOption: {
            brawerLabel: 'Home',

        }
    },
    Camera:{
        screen: Stack2,
         navigationOption: {
            brawerLabel: 'Camera',

        }
    },
    Info:{
        screen: Stack3,
         navigationOption: {
            brawerLabel: 'Info',
        }
    }
})

我该如何解决此错误。

Answer 1

先前的答案都没有很好的可扩展性，因此请考虑使用我的解决方案。为了完整起见，我react-native-vector-icons在示例中使用。

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';

const MenuIcon = ({ navigate }) => <Icon 
    name='three-bars' 
    size={30} 
    color='#000' 
    onPress={() => navigate('DrawerOpen')}
/>;

const Stack = {
    FirstView: {
        screen: Login,
        navigationOptions: ({ navigation }) => ({
            headerRight: MenuIcon(navigation)
        })
    }
};

// ...Remaining navigation code etc.

假设您希望打开抽屉相同的图标（实际上应该是大多数用例）。

Answer 2

static navigationOptions = ({ navigation }) => ({
    headerTitle: "Home",
    ...css.header,
    headerLeft:
    <View style={{paddingLeft:16}}>
        <Icon
            name="md-menu"
            size={30}
            color='white'
            onPress={() => navigation.navigate('DrawerOpen')} />
    </View>,
})

在 style.js 类中我添加了常量调用标头

export const header = {
  // background
  headerStyle: {
    backgroundColor: colors.secondary_blue,
  },
  // arrows
  headerTintColor: colors.text_light,
  // my own styles for titleAndIcon
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',

    alignItems: 'center',
    paddingLeft: 8,
  },
  // my own styles for titleAndIcon
  text: {

    paddingLeft: 8,
    color: colors.text_light,
    fontFamily: values.font_body,
    fontSize: values.font_title_size,
  }

};