React Native点击TouchableOpacity包裹文本弹出选项及代码实现咨询

你参考的《React Native on click show options》相关类组件代码完全可以转换为函数组件，以下是两种可直接落地的实现方案：

方案1：使用React Native内置API实现跨平台弹出选项 #

无需引入第三方依赖，直接适配iOS/Android原生交互规范，适合简单选项场景：

import React from 'react';
import { TouchableOpacity, Text, ActionSheetIOS, Alert, Platform, View, StyleSheet } from 'react-native';

const OptionPopoverDemo = () => {
  // 自定义选项列表
  const options = ['编辑内容', '删除条目', '分享内容', '取消'];
  const cancelButtonIndex = 3;

  const handlePress = () => {
    if (Platform.OS === 'ios') {
      // iOS端调用原生ActionSheet
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options,
          cancelButtonIndex,
          title: '请选择操作',
        },
        (selectedIndex) => {
          if (selectedIndex !== cancelButtonIndex) {
            console.log('选中的选项：', options[selectedIndex]);
            // 此处写对应选项的业务逻辑
          }
        }
      );
    } else {
      // Android端调用Alert实现选项效果
      Alert.alert(
        '请选择操作',
        '',
        options.slice(0, cancelButtonIndex).map((opt, index) => ({
          text: opt,
          onPress: () => {
            console.log('选中的选项：', opt);
            // 此处写对应选项的业务逻辑
          },
        })).concat([
          {
            text: '取消',
            style: 'cancel',
          }
        ])
      );
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
        <Text style={styles.triggerText}>点击弹出选项</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  triggerText: {
    fontSize: 16,
    color: '#2385bb',
  },
});

export default OptionPopoverDemo;

方案2：自定义模态框实现全样式可控的选项弹窗 #

如果需要自定义弹窗样式、位置，可以用React Native内置的Modal组件实现，灵活性更高：

import React, { useState } from 'react';
import { TouchableOpacity, Text, Modal, View, StyleSheet, TouchableWithoutFeedback } from 'react-native';

const CustomOptionModalDemo = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const options = ['编辑内容', '删除条目', '分享给好友'];

  const handleOptionSelect = (option) => {
    setModalVisible(false);
    console.log('选中的选项：', option);
    // 处理对应业务逻辑
  };

  return (
    <View style={styles.container}>
      {/* 触发弹窗的点击区域 */}
      <TouchableOpacity onPress={() => setModalVisible(true)} activeOpacity={0.7}>
        <Text style={styles.triggerText}>点击弹出自定义选项</Text>
      </TouchableOpacity>

      {/* 自定义选项弹窗 */}
      <Modal
        visible={modalVisible}
        transparent={true}
        animationType="fade"
        onRequestClose={() => setModalVisible(false)}
      >
        {/* 点击蒙层关闭弹窗 */}
        <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback>
              <View style={styles.optionContainer}>
                <Text style={styles.modalTitle}>请选择操作</Text>
                {options.map((opt, index) => (
                  <TouchableOpacity
                    key={index}
                    style={styles.optionItem}
                    onPress={() => handleOptionSelect(opt)}
                  >
                    <Text style={styles.optionText}>{opt}</Text>
                  </TouchableOpacity>
                ))}
                <TouchableOpacity
                  style={[styles.optionItem, styles.cancelItem]}
                  onPress={() => setModalVisible(false)}
                >
                  <Text style={styles.cancelText}>取消</Text>
                </TouchableOpacity>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  triggerText: {
    fontSize: 16,
    color: '#2385bb',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  optionContainer: {
    backgroundColor: 'white',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 16,
    paddingBottom: 32,
  },
  modalTitle: {
    fontSize: 14,
    color: '#666',
    paddingVertical: 16,
    textAlign: 'center',
  },
  optionItem: {
    paddingVertical: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#eee',
  },
  optionText: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
  cancelItem: {
    marginTop: 8,
    borderBottomWidth: 0,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  cancelText: {
    fontSize: 16,
    color: '#999',
    textAlign: 'center',
  },
});

export default CustomOptionModalDemo;

注意事项 #

• 若需要带图标、分组、搜索等复杂选项功能，可以直接使用@react-native-community/actionsheet等成熟社区库，无需重复造轮子
• TouchableOpacity的activeOpacity属性可根据设计需求调整，建议设置在0.5-0.8区间提升交互反馈
• 自定义Modal时建议添加onRequestClose回调适配Android物理返回键关闭弹窗的交互

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