在反应原生的 createDrawerNavigator 项目上设置 onpress？

Question

我有一个抽屉项目“共享应用程序”，我想在其中打开一个警报并显示一条消息，而不是在 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参数在哪添加调用函数？我不想要屏幕参数，只希望在我点击分享应用程序时调用一个函数。

如何在 React Native 中做到这一点？

请帮忙，因为我是 React 本机开发的新手....

谢谢。

Answer 1

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

正在创建自定义抽屉内容：

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.

导入