react-native - StackNavigator 菜单未在左侧对齐
问题描述
我正在尝试在我的 expo 应用程序中实现反应堆栈导航器。该应用程序运行良好,除了抽屉菜单图标未按预期显示在左侧。谁能告诉我我在哪里搞砸了?
这是应用程序的屏幕截图 在 此处输入图像描述
这是我的 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',
},
});
解决方案
您可能需要在 NativeBase中包含所有Left
, Body
, 和Right
Header
<Header>
<Left>
<Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
</Left>
<Body/>
<Right/>
</Header>
推荐阅读
- javascript - 如何使网格行大小保持不变,并使文本自行调整大小?
- flutter-layout - 使一些透视 3d 平面在颤动中相互交叉
- python - 将字符串逐列格式化为矩阵
- javascript - this._xyz 中的下划线是什么意思?
- kotlin - Kotlin 中没有高阶函数的内联关键字
- plot - 无论策略如何,OfflineReplayEvaluatorBandit 都显示相同的情节 (r)
- python - 无法在带有 xvid 编解码器和轻子摄像头的 python 中使用 opencv 保存视频
- java - 如何使用 Optional.ofNullable() 简化 if 语句
- python - 在python中将字符串放在字符串旁边
- python-3.x - tkinter:将鼠标滚轮绑定到多个框架中多个画布中的滚动条