![](/img/trans.png)
[英]How to configure the ripple color for a React Native Pressable?
[英]How to show icon depending on which Pressable is pressed in React Native?
我有多個 Pressable 組件。 我怎樣才能做到當我點擊 Motorcycle pressable 時,復選圖標會顯示在它旁邊,如果在 Tricycle Pressable 上,復選圖標會顯示在它旁邊,而 Motorcycle 圖標上的復選圖標將會消失。
我試過創建一個 state 但它同時設置了所有圖標。 這是代碼:
const [checkIcon, setCheckIcon] = useState(false)
<Pressable
style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
onPress={() => setCheckIcon(true)}
>
<Image source={require("../assets/motorcycle.png")} style={styles.modalFieldImage} />
<View style={styles.modalFieldVehicleNameContainer}>
<Text style={styles.modalFieldText}>Motorcycle</Text>
<Text style={styles.modalFieldTextDescription}>Cheapest option perfect for small-sized items</Text>
<Text style={styles.modalFieldTextDescription}>Up to 20 kg</Text>
</View>
{
checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
}
</Pressable>
<Pressable
style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
onPress={() => setCheckIcon(true)}
>
<Image source={require("../assets/tricycle.png")} style={styles.modalFieldImage} />
<View style={styles.modalFieldVehicleNameContainer}>
<Text style={styles.modalFieldText}>Tricycle</Text>
<Text style={styles.modalFieldTextDescription}>Perfect for multiple medium-sized items</Text>
<Text style={styles.modalFieldTextDescription}>Up to 70 kg</Text>
</View>
{
checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
}
</Pressable>
<Pressable
style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
onPress={() => setCheckIcon(true)}
>
<Image source={require("../assets/sedan.png")} style={styles.modalFieldImage} />
<View style={styles.modalFieldVehicleNameContainer}>
<Text style={styles.modalFieldText}>Sedan Car</Text>
<Text style={styles.modalFieldTextDescription}>Good for cakes and multiple small to medium-sized items</Text>
<Text style={styles.modalFieldTextDescription}>Up to 200 kg</Text>
</View>
{
checkIcon === true ? <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} /> : null
}
</Pressable>
這是一個簡單的例子,使用索引 state 來記錄用戶選擇了哪個項目。
由於您的列表可以動態生成,因此您可以使用數組存儲所有用於渲染的參數,並使用map()
逐一渲染。
const [optionArray, setOptionArray] = useState([
{
title: "Motorcycle",
desc1: "Cheapest option perfect for small-sized items",
desc2: "Up to 20 kg",
img: "../assets/motorcycle.png",
},
{
title: "Tricycle",
desc1: "Perfect for multiple medium-sized items",
desc2: "Up to 70 kg",
img: "../assets/tricycle.png"
},
{
title: "Sedan Car",
desc1: "Good for cakes and multiple small to medium-sized items",
desc2: "Up to 200 kg",
img: "../assets/sedan.png",
}
]);
const [selectedIndex, setSelectedIndex] = useState(-1); //Nothing is selected with initial render
const ListItem = ({option, index}) =>{
return(
<Pressable
style={({ pressed }) => [{ opacity: pressed ? 0.4 : 1 }, styles.modalField]}
onPress={() => setSelectedIndex(index)}
>
<Image source={option.img} style={styles.modalFieldImage} />
<View style={styles.modalFieldVehicleNameContainer}>
<Text style={styles.modalFieldText}>{option.title}</Text>
<Text style={styles.modalFieldTextDescription}>{option.desc1}</Text>
<Text style={styles.modalFieldTextDescription}>{option.desc2}</Text>
</View>
{
index === selectedIndex && <Icon name="check" type="font-awesome-5" size={hp("3%")} color="#322C6A" style={styles.modalFieldIcon} />
}
</Pressable>
)
}
return(
<View>
{
optionArray.map((option, index) =>
<ListItem option={option} index={index} />
)
}
</View>
)
Hardik prajapati 的回答也是另一種解決方案。 當數據列表在運行時排序時,該方法不會影響結果。 但是較大的 object 修改將觸發組件的重新渲染,這在某些情況下可能會導致性能問題。
因此,您可以 select 針對您的情況采用不同的方法。
創建 Vehicle 項目數組,如vehicle:[ image:'put your imageUrl', name:'', description:'', clickStatus:true ]
然后使用 map 方法顯示所有數組項,當您單擊任何項時,使用clickStatus鍵可按下項 true 和其他兩項 false 更新數組,並根據 true 或 false 顯示檢查圖標
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.