StackNavigator 菜单未在左侧对齐

Question

我正在尝试在我的 expo 应用程序中实现反应堆栈导航器。该应用程序运行良好，但抽屉菜单图标未按预期显示在左侧。谁能告诉我我哪里搞砸了？

这是应用程序的屏幕截图 enter image description here

这是我的App.js

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions, Image } from 'react-native';

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

import SplashScreen from './src/components/splash';
import LibraryScreen from './src/screens/LibraryScreen';
import ReminderScreen from './src/screens/ReminderScreen';
import ReportScreen from './src/screens/ReportScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import TrainingScreen from './src/screens/TrainingScreen';

export default class App extends React.Component {
  render() {
    return (
      <AppDrawerNavigator/>
    );
  }
}

const CustomDrawerComponent = (props) =>(
  <SafeAreaView style={{ flex:1 }}>
    <View style={{ height:150, backgroundColor: 'white',alignItems:'center', justifyContent:'center' }}>
      <Image source={require('./assets/icon.png')} style={{ height:120, width: 120, borderRadius:60 }} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator({
  Training:TrainingScreen,
  Library:LibraryScreen,
  Report:ReportScreen,
  Reminder:ReminderScreen,
  Settings:SettingsScreen
},{
  contentComponent:CustomDrawerComponent
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是 Training.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import {header,Left,Right,Icon, Header} from 'native-base'

class TrainingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header>
          <Left>
            <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
          </Left>
        </Header>
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
          <Text>Training Screen</Text>
        </View>
      </View>
    );
  }
}
export default TrainingScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Answer 1

您可能需要在 NativeBase Header

中包含所有 Left、Body 和 Right

<Header>
  <Left>
    <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
  </Left>
  <Body/>
  <Right/>
</Header>

Answer 2

只需在您的代码中添加以下样式即可。在您的代码中添加此样式 <Left style={{justifyContent:"flex-start",flex:1}}>

Training.js

  class TrainingScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header >
          <Left style={{justifyContent:"flex-start",flex:1}}><---Update---
            <Icon
              name="menu"
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>
        </Header>
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <Text>Training Screen</Text>
        </View>
      </View>
    );
  }
}
export default TrainingScreen;

StackNavigator 菜单未在左侧对齐

StackNavigator menu not aligning on the left

react-native

react-navigation

native-base