使用自定义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.此外,从反应导航中复制如此多的代码似乎是非常糟糕的形式.

我只想要一个项目来做一些自定义逻辑而不是渲染屏幕.

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',
  }
},))