EXPO：设置 react-native-action-sheet

Question

当前尝试设置 react-native-action-sheet 并获得无效的钩子调用

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我按照示例包装了我的wrapped your top-level component with even when using hooks。

export default () => (
  <ActionSheetProvider>>
    <App />
  </<ActionSheetProvider>>
);

想知道这是否是我设置的方式：

import { Linking } from 'react-native';
import { useActionSheet } from '@expo/react-native-action-sheet';

export const SideButton = () => {
  const { showActionSheetWithOptions } = useActionSheet();
  const cancelButtonIndex = 1;
  const options = ['Email', 'Cancel'];
  const title = 'Email Me';
  const message = 'Let me know your issues';

  return showActionSheetWithOptions(
    {
      options,
      cancelButtonIndex,
      title,
      message,
    },
    (buttonIndex) => {
      if (buttonIndex === 0) {
        Linking.openURL('mailto:_____').catch();
      } else {
        return;
      }
    }
  );
};

甚至我在这里如何称呼它：

import { Linking, Text, TouchableOpacity, View } from 'react-native';
import { SideButton } from './utils/HelpPopUp';

const ButtonContainer = () => (
  <TouchableOpacity>
    <Text onPress={() => Linking.openURL('_MY_WEBSITE_').catch()}>Checkout my stuff</Text>
  </TouchableOpacity>
);

const Menu = (props) => {
  return (
    <View>
        <ButtonContainer />
    </View>
  );
};

export default Menu;

Answer 1

抱歉，我的回答是提出替代方案，而不是回答您的问题并展示我自己使用的组件。我没有使用您在主题中提到的包，但我之前尝试过使用不同的包，它做同样的工作。 https://www.npmjs.com/package/react-native-actions-sheet

这是我使用的自定义组件。

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ActionSheet from 'react-native-actions-sheet';;

const CustomActionSheet = React.forwardRef(({children, title}, ref) => {
  return (
    <ActionSheet
      ref={ref}
      headerAlwaysVisible={true}
      containerStyle={[
        styles.containerStyle,
        {backgroundColor: '#FFF'},
      ]}
      CustomHeaderComponent={
        <View style={[styles.header, {backgroundColor: '#4ac'}]}>
          <Text style={styles.title}>
            {title}
          </Text>
        </View>
      }>
      {children}
    </ActionSheet>
  );
});

const styles = StyleSheet.create({
  header: {
    height: 50,
    justifyContent: 'center',
    padding: 5,
  },
  title: {
    color: '#FFF',
    fontSize: globalStyles.titleText.fontSize,
  },
  containerStyle: {
    borderRadius: 0,
  },
});

export default CustomActionSheet;

用法：

import React, { createRef } from "react";
import {View, Text} from "react-native";
import CustomActionSheet from './CustomActionSheet';

const actionSheetRef = createRef();

const AnythingPage = () => {
   return (
     <View>
       <Text onPress={() => actionSheetRef.current?.show()}>
         Open Custom Sheet
       </Text>
       
       <CustomActionSheet ref={actionSheetRef} title={'Title'}>
         <View>
           <Text>Add anything in it.</Text>
         </View>
       </CustomActionSheet>
     </View>
   )
}

通过这些，您可以开发将在整个应用程序中使用的结构。