如何在这个 React 导航设置中使用 contentComponent

Question

我正在创建一个 react-native 应用程序，并用于导航 react-navigation。我正在尝试使用以下代码获得正常的抽屉行为。 我已经尝试实现一个自定义抽屉组件，但似乎我没有正确理解它。

如何使用 contentComponent 来实现这一点。

尝试的 DrawerContent 不起作用。

import React, {Component} from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import {Ionicons} from '@expo/vector-icons';
import { AppRegistry,View, Image, TouchableOpacity,Text} from 'react-native';


import FirstScreen from './src/FirstScreen';
import MapScreen from './src/MapScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';

import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';


const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: <App navigationProps={navigation} />,
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
    Second: {
      screen: Screen2,
      navigationOptions: ({ navigation }) => ({
        title: 'Demo Screen 2',
        headerLeft: <App navigationProps={navigation} />
      }),
    },q
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <App navigationProps={navigation} />,
    }),
  },
});

const DrawerContent = (props) =>(
  <View>
    <View
       style={{
         backgroundColor:'#f50057',
         height:140,
         alignItems:'center',
         justifyContent: 'center'
       }}>
       <Text style={{color: 'white',fontSize:30}}>
          Header
        </Text>
    </View>
    <DrawerItems />
  </View>
)

const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Home',
      },
  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Get Location',
    },
  },
  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Exit',
    },
  }
},{
   contentComponent: DrawerContent,
});
class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      isReady: false
    }
  }
  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };

  async componentDidMount(){
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    }).then((err) =>{
      this.setState({ isReady: true });
    })

  }

  render(){
    if(!this.state.isReady){
      return(
        <AppLoading/>
      )
    }

    return(

      <View style={{ flexDirection: 'row',marginLeft:10 }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Text style={{color:"#000",fontSize:20}}>Menu</Text>
        </TouchableOpacity>
      </View>

    )
  }
}
export default createAppContainer(DrawerNavigatorExample);

Answer 1

你可以试试这个

const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Home',
      },
  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Get Location',
    },
  },
  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Exit',
    },
  }
},{
   contentComponent: props => DrawerContent(props),
});