如何使用React-navigation在React Native中的DrawerNavigator中呈现所有项目

时间:2019-06-10 01:09:21

标签: react-native navigation-drawer react-navigation drawerlayout

菜单中我的项目没有完全显示: Problem

我正在使用最新版本的react-native以及react-navigation。所用手机的屏幕为5.5英寸(1920和1080)

我删除了一些导入,这些导入在应用程序的执行中没有任何区别,只是没有变得很大

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Dimensions,
  Image,
  StatusBar
} from "react-native";
import {
  createDrawerNavigator,
  createAppContainer,
  DrawerItems,
  SafeAreaView
} from "react-navigation";

import LoginScreen from "./Screens/Login/LoginScreen";
import HomeScreen from "./Screens/Home/HomeScreen";
import ChatScreen from "./Screens/Chat/ChatScreen";
type Props = {};

export default class App extends Component<Props> {
  render() {
    return <Apps />;
  }
}

const CustomDrawerComponent = props => (
  <SafeAreaView style={{ flex: 1 }}>
    <StatusBar backgroundColor="#167cc4" barStyle="bold" />
    <View
      style={{
        height: 150,
        backgroundColor: "white",
        alignItems: "center",
        justifyContent: "center",
        paddingTop: 25
      }}
    >
      <Image
        source={require("./images/perfil.png")}
        style={{ height: 120, width: 120, borderRadius: 60 }}
      />
      <Text style={styles.textoUser}>Acesse sua Conta</Text>
    </View>
    <ScrollView style={{ paddingTop: 25 }}>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
);

const AppDrawerNavigator = createDrawerNavigator(
  {
    Início: HomeScreen,
    Chat: ChatScreen,
    "Minha Conta": MinhaContaScreen,
    Contato: ContatoScreen,
    Suporte: SuporteScreen,
    Dúvidas: DuvidasScreen,
    "Sair da Conta": LoginScreen,
    "Relate um Bug!": BugScreen
  },
  {
    contentComponent: CustomDrawerComponent
  }
);
const Apps = createAppContainer(AppDrawerNavigator);

const styles = StyleSheet.create({
  textoUser: {
    textTransform: "uppercase",
    fontSize: 18,
    color: "#167cc4",
    fontWeight: "bold",
    paddingTop: 15
  }
});

我希望它能使写作恢复完整,不是图片显示的一半。

0 个答案:

没有答案