反应导航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

您所使用的按钮是应该从 天然碱基导入按钮，当你正在使用style属性，或者只是用这个代替那个按钮代码，用下面的代码代替它

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

使用，这将有助于你与