有沒有辦法在StyleSheet? 中使用三元運算子？
目前，我的TextInput樣子是這樣的：
.tsx
<TextInput
defaultValue={selectedEvent ? selectedEvent.title : ""}
style={[
styles.textInput,
{ color: colorScheme === "dark" ? "#ffffff" : "#000000" },
]}
onChangeText={inputChangeHandler}
/>
樣式表
const styles = StyleSheet.create({
textInput: {
borderBottomColor: "#ccc",
borderBottomWidth: 1,
marginBottom: 15,
paddingVertical: 4,
paddingHorizontal: 2,
},
})
最好不要結合內部和外部樣式。
uj5u.com熱心網友回復：
試試這個：在你TextInput 中：
style={styles.textInput(colorScheme)}
在樣式表中
textInput:(colorScheme)=> ({
borderBottomColor: '#ccc',
borderBottomWidth: 1,
marginBottom: 15,
paddingVertical: 4,
paddingHorizontal: 2,
color: colorScheme === "dark" ? "#ffffff" : "#000000"
}),
小吃示例
uj5u.com熱心網友回復：
在 StyleSheet 中，您不能使用三元。但是你可以像這樣組合三元和樣式表：
<div
style={checkIfActive(props.position, 1)
? { ...styles.circle, ...styles.circleActive }
: { ...styles.circle, ...styles.circleUnactive }}
/>
你的 CSS 可以是：
circle: {
width: '80%',
margin: 'auto',
height: 20,
borderRadius: 10,
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#ffffff83',
},
circleUnactive: {
backgroundColor: '#40c5ee4e',
},
circleActive: {
backgroundColor: '#40c5ee',
},
uj5u.com熱心網友回復：
所述StyleSheet被生成靜態造型“類”，但是可以定義一個光/暗類來使用，并將它附加到陣列。不過，這與您已經完成的作業沒有太大不同。
例子：
<TextInput
defaultValue={selectedEvent ? selectedEvent.title : ''}
style={[
styles.textInput,
styles[colorScheme === 'dark' ? 'dark' : 'light'],
]}
onChangeText={console.log}
/>
...
const styles = StyleSheet.create({
...
textInput: {
borderBottomColor: '#ccc',
borderBottomWidth: 1,
marginBottom: 15,
paddingVertical: 4,
paddingHorizontal: 2,
},
light: {
color: '#000',
},
dark: {
color: '#fff',
},
});
這是上述代碼的運行Expo Snack。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335866.html
上一篇：角墊標簽和輸入并排