我有一個名為 isProfile 的道具，它由使用下面樣式表的組件（Feed）使用。我想根據 isProfile 屬性設定為 true 還是 false 有條件地呈現容器的高度。
function Feed({isProfile}){
return(
<View style={style.container}>
</View>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:colors.primary,
width:windowWidth,
justifyContent:"center",
height: isProfile ? windowHeight : windowHeight*0.87,
},
uj5u.com熱心網友回復：
您應該將樣式更改為接受引數的函式：
function Feed({isProfile}){
return(
<View style={createStyles(isProfile).container}>
</View>
)
}
const createStyles = (profile) => StyleSheet.create({
container:{
backgroundColor:colors.primary,
width:windowWidth,
justifyContent:"center",
height: profile ? windowHeight : windowHeight*0.87,
},
的isProfile變數（丙）是本地的組分和不可見的外部，因此它必須作為引數被傳遞
uj5u.com熱心網友回復：
這就是我解決我的問題的方法。
我改變了我的樣式表代碼
const styles = (isProfile) => StyleSheet.create({
container:{
backgroundColor:colors.primary,
width:windowWidth,
justifyContent:"center",
height: isProfile ? windowHeight : windowHeight*0.87,
},
)}
然后我將 prop 傳遞給 styleSheet
<View style={styles(isProfile).container}>
</View>
uj5u.com熱心網友回復：
您可以通過使用樣式style={[{},{}]}等物件陣列來存盤多個樣式。這允許您添加我添加的第二部分
function Feed({isProfile}){
return(
<View style={[style.container,{height: isProfile ? windowHeight : windowHeight*0.87,}]}>
</View>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:colors.primary,
width:windowWidth,
justifyContent:"center",
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/351491.html
標籤：javascript 反应 反应原生 反应道具