首页 > 解决方案 > React-Native ,Drawer Navigator(React-Navigation)中的项目在某些设备上不完全可见

问题描述

所以我的应用程序中的抽屉在理想情况下应该是这样的:

在此处输入图像描述

但它看起来像这样:

在此处输入图像描述

我正在这样创建它并将其传递给我的 stackNavigator

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

我的抽屉组件是:

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,欢迎任何阅读建议

标签: androidreactjsreact-nativereact-navigation

解决方案


我发现这个问题的一个更愚蠢的解决方案是在我的键之后添加空格,如下所示:

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

推荐阅读