在react native中的createDrawerNavigator项目上设置onpress吗？ 创建自定义抽屉内容：将自定义抽屉内容组件传递到contentComponent

问题描述

我有一个抽屉项目“ Share App”，我想在其中打开警报并显示消息，而不是在react native中打开整个屏幕。我的代码如下：

const Screen6_StackNavigator = createStackNavigator({
  //All the screen from the Screen6 will be indexed here
  Sixth: {
    screen: ShareApp,//don't want this screen
    title:'Share',navigationoptions: ({ navigation }) => ({
      headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,headerStyle: {
        backgroundColor: '#138808',},headerTintColor: '#fff',}),});

const DrawerNavigatorExample = createDrawerNavigator({
  ShareApp: {
    //Title
    screen: Screen6_StackNavigator,navigationoptions: {
      drawerLabel: 'Share App',drawerIcon: (<Entypo name="share" size={20} color='black'></Entypo>)

    },);

在何处添加onPress参数以调用该函数？我不希望使用screen参数，只希望在单击Share App时才调用函数。

如何在本机反应中做到这一点？

在我是React本机开发的新手时提供帮助...

谢谢。

解决方法

您可以创建自定义抽屉内容组件，并将其传递到contentComponent中的DrawerNavigatorConfig选项。

创建自定义抽屉内容：

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView
      style={{ flex: 1 }}
      forceInset={{ top: 'always',horizontal: 'never' }}>
      <TouchableOpacity
        onPress={() => {
          // Do something...
          Alert.alert('Heading','Body');
        }}
        style={{ left: 15,flexDirection: 'row',alignItems: 'center' }}>
        <Entypo name="share" size={20} color='black'></Entypo>
        <Text style={{ marginLeft: 30,fontWeight: 'bold' }}>Share App</Text>
      </TouchableOpacity>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

DrawerItems组件将根据您创建的屏幕呈现可单击的抽屉选项，但是在DrawerItems上方，我们可以添加例如共享按钮。

将自定义抽屉内容组件传递到contentComponent

const DrawerNavigatorExample = createDrawerNavigator(
  {
    Screen1: {
      // Properties...
    },// Other screens...
  },{
    // Pass custom drawer content component...
    contentComponent: props => <CustomDrawerContentComponent {...props} />,// Other configurations...
  },);

DrawerItems 应该从react-navigation-drawer导入。