React native 选择一个零部件后，选择并取消选择零部件

我必须显示三个组件卡，用户可以从中选择一个。我将这三个组件放置在ScrollView中，如下所示：

在上面的代码中，当cad选择后，它成功地将边框颜色更改为绿色，但我可以更改所有组件的颜色。我想让它看起来，如果选择了一个，所有其他的都应该回到红色。

为LocationAndPriceCard、value和onPress创建两个新道具

使用值确定选择的卡，并根据该值更改边框颜色

使用onPress功能设置具有所选卡片标题的状态，我们将使用该状态确定所选卡片

完整工作示例：

从“React”导入React，{useState}； 进口{ 文本 看法 样式表， 滚动视图， 可触摸不透明度， }从“反应本机”； 从“expo常量”导入常量； //可以从本地文件导入 从“./components/AssetExample”导入AssetExample； //或npm中可用的任何纯javascript模块 从“react native paper”导入{Card}； 导出默认功能应用程序{ const[selected，setSelected]=useStatenull； const handleSelected=值=>{ 设置选定值； }; 回来 ; } 函数位置和价格卡{price，title，onPress，value}{ 回来 onPresstitle}> RM{price} {title} ; } const styles=StyleSheet.create{ 容器：{ 弹性：1， paddingTop:Constants.statusBarHeight， 背景颜色：“ecf0f1”， 填充：8， }, 框架：{ 边框宽度：1， 宽度：50， 身高：50， 背景颜色：“fff”， 边界半径：8， 差额：5， 填充：10， }, }; 为LocationAndPriceCard、value和onPress创建两个新道具

使用值确定选择的卡，并根据该值更改边框颜色

使用onPress功能设置具有所选卡片标题的状态，我们将使用该状态确定所选卡片

完整工作示例：

从“React”导入React，{useState}； 进口{ 文本 看法 样式表， 滚动视图， 可触摸不透明度， }从“反应本机”； 从“expo常量”导入常量； //可以从本地文件导入 从“./components/AssetExample”导入AssetExample； //或npm中可用的任何纯javascript模块 从“react native paper”导入{Card}； 导出默认功能应用程序{ const[selected，setSelected]=useStatenull； const handleSelected=值=>{ 设置选定值； }; 回来 ; } 函数位置和价格卡{price，title，onPress，value}{ 回来 onPresstitle}> RM{price} {title} ; } const styles=StyleSheet.create{ 容器：{ 弹性：1， paddingTop:Constants.statusBarHeight， 背景颜色：“ecf0f1”， 填充：8， }, 框架：{ 边框宽度：1， 宽度：50， 身高：50， 背景颜色：“fff”， 边界半径：8， 差额：5， 填充：10， }, };

...
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                <LocationAndPriceCard
                    price={'100'}
                    title={'Choice 3'} />
                <LocationAndPriceCard
                    price={'200'}
                    title={'Choice 2'} />
                <LocationAndPriceCard
                    price={'300'}
                    title={'Choice 1'}} />
            </ScrollView>
...

...
function LocationAndPriceCard({ price, title }) {

    const [selectedLocation, setSelectedLocation] = useState("red")

    const styles = getStyles(selectedLocation);

    const selected = () => {
        if (selectedLocation == "red") {
            setSelectedLocation("green")
        } else {
            setSelectedLocation("red")
        }
    }

    return (
        <TouchableOpacity style={styles.frame} onPress={selected}>

            <Text style={styles.priceTxt}>RM {price}</Text>
            <Text style={styles.title} numberOfLines={2}>{title}</Text>
        </TouchableOpacity>
    );
}

const getStyles = (borderC) => StyleSheet.create({
    frame: {
        borderWidth: 1,
        borderColor: borderC,
        width: 180,
        backgroundColor: '#fff',
        borderRadius: 8,
        margin: 5,
        padding: 10,
    },
...