反应导航内容组件不起作用答案

【问题标题】：React-navigation contentComponent is not working反应导航内容组件不起作用
【发布时间】：2017-07-27 11:27:23
【问题描述】：

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

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

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;

【问题讨论】：

尝试将 Button onPress 事件（在 DrawerContent 组件中）更新为
感谢您的回复。它与这个错误有什么关系？
没有定义名为“this.handlechange”的函数。此外，您需要导航/路线。为此，您必须使用导航对象。
contentComponent 还是一样的错误
试试这个：contentComponent: props => ( <DrawerContent {...props} /> )

标签： reactjs react-native react-native-android react-native-ios react-navigation

【解决方案1】：

您使用的按钮是应该从 native base ，当您为此使用 style 属性，或者只是使用 this 而不是那个按钮代码时，请将其替换为以下一个

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

使用它会帮助你解决这个问题

【讨论】：

这并不能解决主要问题：Element type is invalid
尝试从 './components/DrawerContent' 中删除导入 {DrawerContent} 中的 { } 因为我使用了相同的代码，所以我不必像这样导入，我只有 import DrawerContent 表单'./组件/抽屉内容'
那是因为它使用默认导出：export default DrawerContent;
顺便说一句，这不是我的问题/问题:)

【解决方案2】：

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

【讨论】：