抽屉菜单文本从右侧截去

Question

我正在React Native应用程序中创建抽屉导航，但是抽屉菜单文本无法正确显示。我有一个关于的菜单，但其显示为“ abou”，其次是Contact，其显示为“ Con-”。代码运行正常，但文本被截断。它只显示一些字符。

import React, { Component } from 'react';
import {Text, View, StyleSheet,SafeAreaView,ScrollView,Dimensions,Image } from 'react-native';
import {createDrawerNavigator, DrawerItems} from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import AboutScreen from './screen/AboutScreen';
import ContactScreen from './screen/ContactScreen';

export default class App extends 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/images/logo.png')} style={{height:120,width:120,borderRadius:60}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator ({
    Home: HomeScreen,
    About: AboutScreen,
    Contact: ContactScreen,
}, {
  contentComponent: CustomDrawerCOmponent,
}
)

styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

代码运行正常，但文本被截断。它只显示一些字符。

这是image的样子