React-Native, элементы в Drawer Navigator (React-Navigation) не полностью видны на некоторых устройствах

Question

Таким образом, ящик в моем приложении в идеале должен выглядеть так:

, но вместо этого он выглядит следующим образомthis:

Я создаю его вот так и передаю в мой стекNavigator

export const Drawer = createDrawerNavigator({
"Home":Home,
"Profile":Profile,
"Contact Us":Contact
},{ 
  contentComponent:DrawerComponent
})

Мой DrawerComponentis:

class Content extends React.Component<IProps>{

 render(){
  return (<View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 100,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 15 }}>
        {this.props.name}
      </Text>
      <Text style={{ color: 'white', fontSize: 15 }}>
         {this.props.phone}
      </Text>
    </View>
    <DrawerItems {...this.props} />
  </View>
   )
 }
}

StackOverflow, приветствуются любые рекомендации по чтению

Answer 1

Глупое решение, которое я нашел в этом вопросе, заключалось в добавлении пробела после моих ключей, например:

 export const Drawer = createDrawerNavigator({
 "Home ":Home,
 "Profile ":Profile,
 "Contact Us ":Contact,
 "Your Progress ":UserProgress
 },{ 
  contentComponent:DrawerComponent
 })

Answer 2

Какую ширину вы указали для просмотра текста?

Существует нечто, называемое «Инспектор переключения», которое поможет вам отладить пользовательский интерфейс.Проверьте эту ссылку , чтобы прочитать ее документацию.

Проверьте правильность ширины метки / текста.