0

我正在尝试为聊天应用程序制作一个底部滑块以显示一些菜单项（我正在使用 react-native-gifted-chat），但我无法为模态设置特定高度，那么如何解决这个问题？

我尝试使用maxHeight并尝试包含模态，<View><Modal/></View>但这也不起作用。另外，你们能推荐一个我可以实现 IOS 的软件包，比如上滑菜单（操作表）。

const Bubble = (props) => {
  const [isBubbleModalOpen, setBubbleModalOpen] = useState(false);
  const { text, replyId, system, selecting, trashed } = props;
  const setChatState = useSetState(`conversations.${conversationId}`);

  const onLeftAction = useCallback(
    ({ isActivated }) => {
      if (isActivated) {
        setChatState({ replyId: props._id });
        Vibration.vibrate(50);
      }
    },
    [props._id]
  );

  const onLongPress = () => {
    Vibration.vibrate(70);
    setBubbleModalOpen(true);
    // showActionSheet();
  };

  const ModalMenu = () => (
    <>
      <Modal
        animationType='slide'
        visible={isBubbleModalOpen}
        onRequestClose={() => setBubbleModalOpen(false)}
        hardwareAccelerated
        backdropColor={"white"}
        backdropOpacity={1}
        style={{
          margin: 0,
          backgroundColor: "white",
          alignItems: undefined,
          justifyContent: undefined,
          height: 300,
        }}
      >
        <View style={{ backgroundColor: "red", flex: 1 }}>
          <Text>Hola</Text>
        </View>
      </Modal>
    </>
  );

  return (
    <SwipeRow
      useNativeDriver
      onLeftActionStatusChange={onLeftAction}
      disableLeftSwipe
      disableRightSwipe={!!(system || trashed || selecting)}
      leftActivationValue={50}
      leftActionValue={0}
      style={styles.swipe}
      swipeKey={props._id + ""}
    >
      <ModalMenu />
      <Pressable
        onLongPress={onLongPress}
        delayLongPress={700}
        android_ripple={{ color: "green", borderless: false }}
      >
        <Message {...props} />
      </Pressable>
    </SwipeRow>
  );
};
4

0 回答 0