React Native中如何映射数组并仅改变点击项的文本颜色？

你的问题出在用单个布尔值状态控制所有项的样式，所有映射出来的Pressable都会共享同一个isPressed状态，所以一点击所有项都会跟着变绿。要实现单个项独立变色，需要用状态记录选中项的索引（或对应的值），具体修改如下：

修改步骤 #

1. 把状态从单个布尔值改为存储选中项的索引（初始值设为null表示无选中项）
2. 点击时更新选中的索引，支持点击同一项取消选中
3. 每个项根据自身索引是否等于选中索引来切换样式
4. 修正外层容器：不能用<Text>包裹Pressable组件，换成<View>避免布局错误

修改后的完整代码 #

import { Text, StyleSheet, View, Pressable } from 'react-native';
import { useState } from 'react';

const PickNotesToTranspose = () => {
    const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];
    // 用selectedIndex记录选中项的索引，初始无选中项
    const [selectedIndex, setSelectedIndex] = useState(null);

    const mapArrChoose = chromaticArrChoose.map((c, index) => {
        const handlePress = () => {
            // 点击同一项则取消选中，否则设置当前索引为选中项
            setSelectedIndex(prev => prev === index ? null : index);
        }

        return (
            <Pressable key={index} onPress={handlePress}>
                {/* 判断当前项索引是否等于选中索引，来切换样式 */}
                <Text style={[index === selectedIndex ? styles.selectedNote : styles.chromatic]}>{c}</Text>
            </Pressable>
        )
    })

    return (
        {/* 用View包裹Pressable组件，替代原来的Text */}
        <View style={styles.container}>{mapArrChoose}</View>
    )
}

export default PickNotesToTranspose;

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 10,
        padding: 10
    },
    chromatic: {
        fontSize: 32,
    },
    selectedNote: {
        color: 'green',
        fontSize: 32,
    },
    btnStyle: {
        borderWidth: 1,
    },
    chooseKeyTxt: {
        marginTop: 50,
        fontSize: 20,
        textAlign: 'center',
    },
})

关键说明 #

• 状态设计：用selectedIndex存储选中项的索引，每个项能独立判断自己是否处于选中状态，避免了全局布尔值导致的批量样式变化
• 点击逻辑：点击时判断当前索引是否已选中，实现"点击选中/取消选中"的交互
• 容器修正：React Native中<Text>只能嵌套文本或其他Text组件，用<View>作为容器才能正确渲染Pressable这类视图组件，同时添加了基础布局样式让音符排列更合理

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