React-native Navigation 添加汉堡包图标

Posted 2023-03-15

【中文标题】React-native Navigation 添加汉堡包图标

【英文标题】：React-native Navigation Add Hamburger Icon

【发布时间】：2017-05-04 13:58:48

【问题描述】：

我正在尝试添加汉堡图标以在 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',
        
    
)

我该如何解决这个错误。谢谢。

【参考方案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.

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

【参考方案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,
  

;

【参考方案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/

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

【参考方案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') />,

【讨论】：

但是当我在headerRight: <Button title="Info" onPress=()=> alert('right button') />, 旁边打电话时this.props.navigation.navigate('DrawerOpen') 我得到undifined is not object (eveluvating '_this2.props.navigation')

你可以这样做 static navigationOptions = function (props) return title: 'Dashboard Screen', headerRight: props.navigation.navigate('Notification') > ;