Question

我在App.js中有此代码（我正在使用CRNA create-react-native-app）。

import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';

import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';

import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';


export default class App extends React.Component {
  constructor(props) {
    super(props); 
  }

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

  render() {
    return (
      <AppStackNavigator/>
      //<MyAppDrawer/>

    );
  }
}

const CustomDrawer = (props) => (
  <Container>
    <Header style={{
      height:200
    }}>

      <Body>
        <Image
          style={styles.drawerImage}
          source={require('./images/logo.png')}
        />
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>

)

const MyAppDrawer = createDrawerNavigator({
  Home: {
    screen: UserLocation
  },
  Shop: {
    screen: ShopNow
  },
  Favorite: {
    screen: ItemFavorite
  }
},{
  initialRouteName: 'Home',
  contentComponent: CustomDrawer,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
});

const AppStackNavigator = createStackNavigator({
  Drawer: {screen: MyAppDrawer},
  App: { 
    screen: UserLocation,
    // navigationOptions:{
    //   title:'Welcome',
    //   headerLeft: 
    //   <View style={{paddingLeft:16}}>
    //     <Icon
    //       name="md-menu"
    //       size={30}
    //       color='black'
    //       onPress={() => navigation.navigate('DrawerOpen')} />
    //   </View>
    // }

  },
  ShopNow: { screen: ShopNow },
  ItemFavorite: { screen: ItemFavorite}
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  drawerImage: {
    height: 150,
    width: 150,
    borderRadius: 75
  }
});

我不知道为什么在任何地方放置static navigationOptions都不会改变首页的标题。

我还尝试在特定页面中使用static navigationOptions.headerLeft添加汉堡图标，但这不起作用。

但是在文件底部的“ ItemFavorite”页面中，我对此进行了设置：

ItemFavorite.navigationOptions = {
    drawerIcon: (
        <Image source={require('../images/tablet.png')} style={{ height: 24, width: 24 }} />
    ),
    title: 'Favorite Item',
    headerLeft: <Text onPress={() => 
        navigation.navigate('DrawerOpen')}>Menu</Text>
}

有效！但是不能在堆栈的第一页中工作。

我在这里想念什么吗？

Answer 1

您需要将“视图”与headerLeft放在同一行

import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';

import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';

import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';


export default class App extends React.Component {
  constructor(props) {
    super(props); 
  }

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

  render() {
    return (
      <AppStackNavigator/>
      //<MyAppDrawer/>

    );
  }
}

如何在导航react-native v2中添加汉堡包图标

1 个答案: