使用自定义onPress轻松添加抽屉项目的方法？

Question

我正在使用DrawerNavigator，只要我想导航到新屏幕，就可以了。

现在，我想添加一个抽屉项目，该项目不会导航到新屏幕，而只是触发一个操作（通常）。具体来说，我想使用“ react-native”共享功能。

我设法解决了这个问题，但我认为解决方案不是很好。这是到目前为止我得到的：

const myContentComponent = props => (
    <ScrollView alwaysBounceVertical={false}>
        <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <TouchableItem
                key="share"
                onPress={() => {
                    Share.share(
                        {
                            message: 'YO: this will be the text message',
                            url: 'http://tmp.com',
                            title: 'This will be the email title/subject',
                        },
                        {
                            // Android only:
                            dialogTitle: 'This will be the title in the dialog to choose means of sharing',
                        },
                    );
                    props.navigation.navigate('DrawerClose');
                }}
                delayPressIn={0}
            >
                <SafeAreaView forceInset={{ left: 'always', right: 'never', vertical: 'never' }}>
                    <View style={[{ flexDirection: 'row', alignItems: 'center' }, {}]}>
                        <View style={[{ marginHorizontal: 16, width: 24, alignItems: 'center' }, { opacity: 0.62 }, {}]}>
                            <Icon name="share" />
                        </View>
                        <Text style={[{ margin: 16, fontWeight: 'bold' }, { color: DrawerItems.defaultProps.inactiveTintColor }]}>Share</Text>
                    </View>
                </SafeAreaView>
            </TouchableItem>
        </SafeAreaView>
    </ScrollView>
);

const RootStack = DrawerNavigator(
    {
        Settings: {
            screen: SettingsScreen,
        },
    },
    {
        contentComponent: myContentComponent,
    },
);

基本上，我是根据默认值创建一个新的contentComponent：

https://github.com/react-navigation/react-navigation/blob/v1.5.8/src/navigators/DrawerNavigator.js#L16-L22

我正在复制普通抽屉项目的样式和元素结构（在TouchableItem下的所有内容-所有这些，因此我可以定义自己的onPress，它执行共享逻辑并关闭抽屉。

必须有更好的方法吧？如果我想将“共享”抽屉项目放在DrawerItems渲染的抽屉项目中（支持导航的项目），该怎么办？现在，我只能解决DrawerItems渲染的项目。此外，从react-navigation复制太多代码似乎是一种非常糟糕的形式。

我只想要一个执行一些自定义逻辑而不是渲染屏幕的项目。

Answer 1

我不确定会不会有帮助？

我使用onPress事件以这种方式注销。无需渲染新的DrawerItems

const DrawerNavigator = createAppContainer(createDrawerNavigator({

  Logout: {
    screen: EmptyScreenForLogoutConfirmation,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Logout',
      drawerIcon: ({ tintColor }) => <Icon name={"ios-cog"} size={26} />,

    }),
  },
}, 
{
  contentComponent:(props ) => (
    <DrawerItems {...props} 
      onItemPress = {
        ( route ) =>       
        {    
          if (route.route.routeName !== "Logout") {
            props.onItemPress(route);
            return;
          }
          return Alert.alert(   // Shows up the alert without redirecting anywhere
            'Confirmation required'
            ,'Do you really want to logout?'
            ,[
              {text: 'No'},
              {text: 'Yes', onPress: () => { props.navigation.navigate('Logedout'); }},
            ]
          )
        }
      }
    />
  ),
  contentOptions: {
    activeTintColor: '#e91e63',
  }
},))