React-native Navigation 添加汉堡包图标

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,
  }

};

Answer 3

我使用 React Native Elements...提供了一些很酷的图标来为菜单增添趣味。它带有很多预设图标。

import { createStackNavigator,createDrawerNavigator, DrawerItems, SafeAreaView  }   from 'react-navigation';
import { Icon } from 'react-native-elements';

这里有 StackNavigator，名为 AboutNavigator……

const AboutNavigator = createStackNavigator({
About:{ screen:About }
},{
navigationOptions: ({ navigation }) => ({
headerStyle: {
    backgroundColor: "#512DA8"
},
headerTitleStyle: {
    color: "#fff"            
},
headerTintColor: "#fff",
headerLeft: <Icon name='menu' size={24} color='white'
   onPress={()=> navigation.toggleDrawer()}
   />
})  
})

您必须从 npm 或 yarn 安装 react-native-vector-icons。但是，是的，那里实际上有一个汉堡包图标。在我将图标命名为“菜单”的地方，您使用的是“汉堡包”。

这是汉堡图标的外观。 https://oblador.github.io/react-native-vector-icons/

在搜索框中，输入汉堡包。

Answer 4

export default class Home extends React.Component {
    static navigationOptions = {
        headerTitle: "User Index",
        headerRight: <Button title="Info" onPress={()=> alert('right button')} />,
    };
    render(){
        return(<UserTabNavigator />);
    }
};

---

我遇到了同样的问题，以上对我有用

密切关注这一行

headerRight: <Button title="Info" onPress={()=> alert('right button')} />,