React Native中如何从模态框内打开新模态框？（表单颜色选择器场景）

嘿，这个需求在React Native里实现起来其实很简单！核心就是用两个独立的状态来分别控制表单模态框和颜色选择器模态框的显示/隐藏就行。我结合你提到的场景，给你写个完整的示例，一看就懂。

1. 用useState声明两个状态：isFormModalVisible控制表单模态框的显示，isColorPickerModalVisible控制颜色选择器模态框的显示。
2. 点击表单里的颜色选择文本时，触发setIsColorPickerModalVisible(true)，打开颜色选择器模态框。
3. 选择颜色后，更新表单的颜色值，同时关闭颜色选择器模态框。

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

const App = () => {
  // 控制两个模态框的显示状态
  const [isFormModalVisible, setIsFormModalVisible] = useState(false);
  const [isColorPickerModalVisible, setIsColorPickerModalVisible] = useState(false);
  
  // 表单数据和选中的颜色
  const [formData, setFormData] = useState({
    name: 'XYZ',
    age: 21,
    color: 'A'
  });

  // 预设的颜色选项
  const colorOptions = ['A', 'B', 'C', 'D', 'E'];

  return (
    <View style={styles.container}>
      {/* 打开表单模态框的按钮 */}
      <TouchableOpacity 
        style={styles.openModalBtn}
        onPress={() => setIsFormModalVisible(true)}
      >
        <Text style={styles.btnText}>打开表单模态框</Text>
      </TouchableOpacity>

      {/* 表单模态框 */}
      <Modal
        visible={isFormModalVisible}
        animationType="slide"
        transparent={true}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.formTitle}>用户表单</Text>
            <Text style={styles.formItem}>Name: {formData.name}</Text>
            <Text style={styles.formItem}>Age: {formData.age}</Text>
            
            {/* 颜色选择器触发区域 */}
            <TouchableOpacity
              onPress={() => setIsColorPickerModalVisible(true)}
              style={styles.colorPickerTrigger}
            >
              <Text style={styles.colorText}>Color: {formData.color}</Text>
            </TouchableOpacity>

            {/* 关闭表单模态框的按钮 */}
            <TouchableOpacity
              style={styles.closeBtn}
              onPress={() => setIsFormModalVisible(false)}
            >
              <Text style={styles.closeBtnText}>关闭表单</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {/* 颜色选择器模态框 */}
      <Modal
        visible={isColorPickerModalVisible}
        animationType="fade"
        transparent={true}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.colorPickerModalContent}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <View style={styles.colorOptionsContainer}>
              {colorOptions.map(color => (
                <TouchableOpacity
                  key={color}
                  style={styles.colorOption}
                  onPress={() => {
                    // 更新表单颜色值
                    setFormData(prev => ({...prev, color}));
                    // 关闭颜色选择器模态框
                    setIsColorPickerModalVisible(false);
                  }}
                >
                  <Text style={styles.colorOptionText}>{color}</Text>
                </TouchableOpacity>
              ))}
            </View>

            {/* 关闭颜色选择器的按钮 */}
            <TouchableOpacity
              style={styles.closeBtn}
              onPress={() => setIsColorPickerModalVisible(false)}
            >
              <Text style={styles.closeBtnText}>取消</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5'
  },
  openModalBtn: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 8
  },
  btnText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500'
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)'
  },
  modalContent: {
    width: '80%',
    backgroundColor: 'white',
    padding: 24,
    borderRadius: 12,
    alignItems: 'center'
  },
  formTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16
  },
  formItem: {
    fontSize: 16,
    marginBottom: 12,
    alignSelf: 'flex-start'
  },
  colorPickerTrigger: {
    alignSelf: 'flex-start',
    marginBottom: 20
  },
  colorText: {
    fontSize: 16,
    color: '#2196F3',
    textDecorationLine: 'underline'
  },
  colorPickerModalContent: {
    width: '70%',
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 12,
    alignItems: 'center'
  },
  colorPickerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 16
  },
  colorOptionsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: 12,
    marginBottom: 20
  },
  colorOption: {
    backgroundColor: '#e0e0e0',
    padding: 10,
    borderRadius: 8,
    minWidth: 60,
    alignItems: 'center'
  },
  colorOptionText: {
    fontSize: 16,
    fontWeight: '500'
  },
  closeBtn: {
    backgroundColor: '#f44336',
    padding: 10,
    borderRadius: 8
  },
  closeBtnText: {
    color: 'white',
    fontSize: 14,
    fontWeight: '500'
  }
});

export default App;

• 两个模态框的状态是完全独立的，你可以选择打开颜色选择器时不关闭表单模态框（就像示例里这样），也可以根据需求先关闭表单模态框再打开颜色选择器，只需要在触发时同时修改两个状态就行。
• React Native的Modal组件是挂载在应用根视图层级上的，所以第二个模态框会自动覆盖第一个，不用担心层级问题。
• 你可以根据自己的UI需求修改模态框的样式，比如调整透明度、动画类型、大小位置等。

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