如何在@expo/react-native-action-sheet的message属性中添加交互组件？

你把React组件以字符串形式传给message属性是行不通的——showActionSheetWithOptions的message参数仅支持纯文本，无法解析JSX或组件字符串，所以才会直接显示成代码文本。

要实现你想要的「动作面板中嵌入日期选择器」的效果，不能依赖官方默认的API参数，得自己自定义底部弹窗组件，结合Modal和日期选择器来实现。

示例实现代码 #

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Modal, StyleSheet } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker'; // 或使用Expo的DateTimePicker

const DatePickerActionSheet = () => {
  const [isSheetVisible, setIsSheetVisible] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const openSheet = () => setIsSheetVisible(true);
  const closeSheet = () => setIsSheetVisible(false);

  const handleDateSelect = (event, date) => {
    if (date) setSelectedDate(date);
  };

  return (
    <View>
      {/* 触发弹窗的按钮 */}
      <TouchableOpacity onPress={openSheet} style={styles.triggerBtn}>
        <Text>选择日期</Text>
      </TouchableOpacity>

      {/* 自定义底部动作面板 */}
      <Modal
        visible={isSheetVisible}
        animationType="slide"
        transparent
        onRequestClose={closeSheet}
      >
        <View style={styles.overlay}>
          <View style={styles.sheetContent}>
            {/* 日期选择器组件 */}
            <DateTimePicker
              value={selectedDate}
              mode="date"
              onChange={handleDateSelect}
              display="default"
            />
            {/* 操作按钮组 */}
            <View style={styles.btnGroup}>
              <TouchableOpacity onPress={closeSheet} style={styles.cancelBtn}>
                <Text>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity 
                onPress={() => {
                  // 这里写确认日期后的逻辑
                  closeSheet();
                }} 
                style={styles.confirmBtn}
              >
                <Text>确认</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  triggerBtn: {
    padding: 12,
    backgroundColor: '#f0f0f0',
    borderRadius: 6,
    alignSelf: 'flex-start',
  },
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  sheetContent: {
    backgroundColor: '#fff',
    padding: 20,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  },
  btnGroup: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 24,
    gap: 16,
  },
  cancelBtn: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  confirmBtn: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#007AFF',
    borderRadius: 6,
  },
});

export default DatePickerActionSheet;

补充说明 #

• @expo/react-native-action-sheet的官方API并没有提供嵌入自定义React组件的能力，只能配置文本按钮和纯文本消息。
• 用Modal实现的自定义弹窗完全可控，你可以根据需求添加任何组件（比如时间选择器、输入框等），样式也能完全匹配你的设计。

内容的提问来源于stack exchange，提问作者Lewis