反应导航内容组件不起作用 [英] React-navigation contentComponent is not working

问题描述

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

I am trying to customize drawer navigator in my app. I am using react-navigation. When first time I've inserted this code it showed just white screen and even navigation links were disappeared after making few things it showed this error screen.

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

Before that it showed just white screen inside drawer without my links. Here is the code.

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;

推荐答案

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

I think it's because contentComponent expects a class component, instead of using react-navigation, use react-navigation-drawer to import createDrawerNavigaor and DrawerNavigatorItems

这篇关于反应导航内容组件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！