首先，我是韓國人。我不擅長英語。所以請理解我關于 garmmar 或 word 的資訊。
反正，
現在我使用 TouchableOpacity，當我像照片一樣按下按鈕時，我想改變亮度。
在此處輸入影像描述
（我不需要復選標記。只是亮度。）
我很高興如果您上傳所有代碼，而不是其中的一部分。因為我是初學者，我不能使用部分代碼。對不起。
請幫助我......我在這個問題上已經有很多次了。
uj5u.com熱心網友回復：
據我了解，您希望在單擊時在影像上使用疊加層。所以要做到這一點，我們將做三件事。
- 添加 TouchableOpacity 作為父視圖
- 添加子影像
- 添加不透明度為 60% 的子疊加視圖
- 創建覆寫布林值 useState()
- 添加切換功能以更新疊加值
功能組件的完整代碼
import * as React from 'react';
import { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Image } from 'react-native';
export default function App() {
// Variables
// overlay Boolean useState()
const [overlay, setOverlay] = useState(false);
// Functions
const toggleOverlay = () => {
setOverlay(!overlay);
}
// Render
return (
<View style={styles.container}>
{/*Parent TouchableOpacity */}
<TouchableOpacity style={styles.parent} onPress={() => toggleOverlay()}>
{/*Child Image */}
<Image
source={{ uri: 'https://picsum.photos/200/300' }}
style={styles.childImage}
/>
{/*Child Overlay w/ Conditional Rendering */}
{overlay && <View style={styles.childOverlay} />}
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: 20,
backgroundColor: 'white',
padding: 8,
},
parent: {
width: 200,
height: 150,
backgroundColor: 'grey',
borderRadius: 5,
},
childImage: {
width: '100%',
height: '100%',
borderRadius: 5,
},
childOverlay: {
width: '100%',
height: '100%',
borderRadius: 5,
backgroundColor:'black',
opacity:0.6,
position:'absolute'
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492759.html
上一篇：如何為我的腳本創建一個具有2個不同標簽的陣列，以便我可以識別游戲名稱和url以將其加載到同一頁面中？
下一篇：單擊時更改按鈕寬度但不更改容器