Question

我想添加汉堡图标来打开反应原生的抽屉。但我得到这个错误

对象无效作为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

以前的答案都不具备可扩展性，所以我认为我的解决方案很重要。为了完整起见，我在我的示例中使用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.。

print (" |---", "  ---", "|  \|", " /_____\\", " |____",)

这假设您需要相同的图标来打开抽屉（这实际上应该是多数用例）。

Answer 2

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')} />,

Answer 3

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 4

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

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

这里我有一个名为AboutNavigator的StackNavigator…

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/

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

React-native Navigation添加汉堡包图标

4 个答案: