React-navigation contentComponent无法正常工作

Question

我正在尝试在我的应用中自定义抽屉导航器。我正在使用react-navigation。当我第一次插入这个代码时，它显示只是白色的屏幕甚至导航链接消失后，它显示了这个错误屏幕。

在此之前它只显示抽屉内的白色屏幕没有我的链接。这是代码。

App.js

import React from 'react';

import {StyleSheet, Text, View } from 'react-native';

import WelcomeScreen from './screens/WelcomeScreen';

import SigninScreen from './screens/SigninScreen';

import SignupScreen from './screens/SignupScreen';

import HomeScreen from './screens/HomeScreen';

import FoodScreen from './screens/FoodScreen';

import RestaurantsScreen from './screens/RestaurantsScreen';

import ProfileScreen from './screens/ProfileScreen';

import FavoritesScreen from './screens/FavoritesScreen';

import SettingsScreen from './screens/SettingsScreen';


import { TabNavigator, DrawerNavigator, StackNavigator,contentComponent } from 'react-navigation';

import {DrawerContent} from './components/DrawerContent'


export default class App extends React.Component {

render() {

const MainNavigator = TabNavigator({

  welcome: { screen: WelcomeScreen },

  signin: { screen: SigninScreen },

  signup: { screen: SignupScreen },

  main: {

       screen: DrawerNavigator({

         home: { screen: HomeScreen },

         food: { screen: FoodScreen },

         restaurants: { screen: RestaurantsScreen },

         profile: {

           screen: StackNavigator({

             profilw: { screen: ProfileScreen },

             settings: { screen: SettingsScreen }

           })

         }

       },

       {


  contentComponent: props => <DrawerContent {...props} />,
}

        )
     }
   },

   );


return (

  <MainNavigator />



);


}
}

DrawerContent.js

import React, { Component } from "react";

import { View, ScrollView,Button,Text } from "react-native";

class DrawerContent extends Component {
render() {

return (

  <ScrollView style={styles.container}>

    <View style={{ flex: 1 }}>

      <Button transparent info onPress={() => { this.handlechange(); }}>

        <Text style={{ fontSize: 16 }}>Change Email</Text>

      </Button>

    </View>

  </ScrollView>
);

} }

const styles = {

container: {

flex: 1,

padding: 20,

backgroundColor: 'Green',

}, };

export default DrawerContent;

Answer 1

您使用的按钮是应从中导入的按钮 本机基础，因为您正在使用样式属性，或者只是使用它而不是该按钮代码，将其替换为下面的

<Button onPress={() => { this.handlechange(); }} title="Learn More" color="#841584" />

使用此功能可以帮助您

Answer 2

我认为这是因为contentComponent需要一个类组件，而不是使用react-navigation，而是使用react-navigation-drawer导入createDrawerNavigaor和DrawerNavigatorItems