反應導航contentComponent不工作

-1

我想在我的應用程序中定製抽屜導航器。我正在使用react-navigation。當我第一次插入這段代碼時，它只顯示白色屏幕，甚至導航鏈接在做出幾件事情後都消失了，它顯示了這個錯誤屏幕。反應導航contentComponent不工作

在此之前，這表明裏面的抽屜只是白色屏幕沒有我的鏈接。這是代碼。

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;

來源

2017-07-27 Syuzanna

嘗試更新按鈕onPress事件（在DrawerContent成分）<按鈕透明的信息onPress = {（）=> {this.props.navigation.navigate（'歡迎「）; }} –

感謝您的回覆。它與這個錯誤有什麼關係？ – Syuzanna

沒有定義這種稱爲「this.handlechange」的函數。另外，您需要導航/路由。爲此，您必須使用導航對象。 –

您所使用的按鈕是應該從天然鹼基導入按鈕，當你正在使用style屬性，或者只是用這個代替那個按鈕代碼，用下面的代碼代替它

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

使用，這將有助於你與

來源

2017-07-28 13:32:23

這不能解決主要問題：'元素類型無效' – btzr

嘗試從'./components/Drawer中刪除導入{DrawerContent}中的{}內容「因爲我已經使用了相同的代碼，我沒有導入這樣的我剛纔的進口DrawerContent形式」 ./components/DrawerContent」 –

這是因爲它使用默認的導出：'出口默認DrawerContent;' – btzr

反應導航contentComponent不工作

回答

相關問題