Question

我是新来做出反应的人，并且创建了一个通过汉堡菜单进行路由的项目。我的项目没有显示任何错误，但是我无法显示汉堡菜单图标。但是，如果我在屏幕上滑动，菜单就会如期出现。

我的Portfolio.js代码是：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import HamburgerIcon from '../assets/HamburgerIcon';

export default class Portfolio extends Component {
    static navigationOptions = () => {
        return {
            headerLeft: <HamburgerIcon/>
        };
    };
    render() {
        return (
                <View style={styles.container}>
                    <Text style={styles.title}>Green Screen</Text>
                </View>
        );
    }
 }
  const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    },
    title: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    }
 });

，HamburgerIcon.js代码为：

import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';
import { TouchableOpacity } from "react-native-gesture-handler";
import Icon from 'react-native-vector-icons/SimpleLineIcons';

class HamburgerIcon extends Component{
    render() {
    return (
        <TouchableOpacity
        style={{
            width: 44,
            height: 44,
            marginLeft: 20
        }}
        onPress={()=>{
            this.props.navigation.openDrawer();
        }}>
            <Icon name='menu' size={20} color='black'/>
        </TouchableOpacity>
    )
    };
}
export default withNavigation(HamburgerIcon);

编辑：

NavigationBar.js代码如下：

import { createDrawerNavigator} from 'react-navigation-drawer'; 
import { createAppContainer } from "react-navigation";
import HomePage from '../Pages/HomePage';
import Portfolio from '../Pages/Portfolio';


const HamburgerNavigation = createDrawerNavigator(
    {
        Portfolio: Portfolio,
        HomePage: {
            screen: HomePage,
        }
    },
    {
        initialRouteName: 'HomePage',
        
    }
);
export default createAppContainer(HamburgerNavigation);

有人可以帮助我显示图标吗？

Answer 1

static navigationOptions = ({ navigation }) => ({
    header: (
      <View style={{flex:0, 
            flexDirection: 'row', 
            justifyContent: 'flex-start'
      }}>
          <HamburgerIcon/>
      </View>
    )
  });

如果您使用react-native元素，请参阅此https://react-native-elements.github.io/react-native-elements/docs/header.html

Answer 2

我最终不得不使用Appbar组件，因为navigationOptions仅在您使用StackNavigator而不是我使用DrawerNavigator的情况下有效

标题左侧图标不会显示React Native

2 个答案: