如何在React Native中根据用户选择动态修改模态框内服装颜色？

核心思路 #

用React Native的状态管理（useState）记录当前选中的颜色，点击颜色选项时更新状态，模态框内的服装元素通过绑定这个状态值，实现颜色实时变化。

具体实现步骤 #

1. 初始化状态
   在组件中声明两个状态：一个控制模态框的显示/隐藏，另一个存储当前选中的服装颜色。

2. 构建颜色选择面板
   创建一组颜色选项，每个选项是可点击的色块，点击时更新颜色状态并打开模态框。

3. 实现带动态颜色的模态框
   在模态框内用View模拟服装，将其backgroundColor属性绑定到颜色状态，状态更新时颜色自动变化。

完整示例代码 #

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

const StylistApp = () => {
  // 控制模态框显示状态
  const [modalVisible, setModalVisible] = useState(false);
  // 当前选中的服装颜色，默认黑色
  const [selectedColor, setSelectedColor] = useState('#000000');

  // 可选颜色列表
  const colorOptions = [
    '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFFFFF', '#000000'
  ];

  return (
    <View style={styles.container}>
      {/* 颜色选择面板 */}
      <View style={styles.colorPanel}>
        {colorOptions.map((color, index) => (
          <TouchableOpacity
            key={index}
            style={[styles.colorBlock, { backgroundColor: color }]}
            onPress={() => {
              setSelectedColor(color);
              setModalVisible(true);
            }}
          />
        ))}
      </View>

      {/* 预览模态框 */}
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            {/* 模拟服装的元素，颜色绑定selectedColor */}
            <View style={[styles.clothingItem, { backgroundColor: selectedColor }]} />
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setModalVisible(false)}
            >
              <View style={styles.closeIcon} />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  colorPanel: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
    padding: 20,
  },
  colorBlock: {
    width: 50,
    height: 50,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: '#ccc',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalContent: {
    width: 300,
    height: 400,
    backgroundColor: 'white',
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  clothingItem: {
    width: 200,
    height: 300,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  closeButton: {
    position: 'absolute',
    top: 15,
    right: 15,
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeIcon: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: '#333',
    transform: [{ rotate: '45deg' }],
    position: 'relative',
  },
});

export default StylistApp;

关键说明 #

• 状态绑定：selectedColor状态直接关联服装元素的backgroundColor，状态更新时React Native会自动重新渲染，实现实时预览。
• 颜色选择：通过map遍历颜色列表生成可点击色块，点击时更新状态并打开模态框。
• 模态框控制：用modalVisible状态控制模态框的显示，点击关闭按钮或触发onRequestClose时隐藏模态框。

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