三元操作符React Native在样式表中

Question

是否有办法在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,
},
})

不要把内部样式和外部样式结合在一起。

Answer 1

试试这个:在你文本输入:

style={styles.textInput(colorScheme)}

和样式表

textInput:(colorScheme)=> ({
borderBottomColor: '#ccc',
borderBottomWidth: 1,
marginBottom: 15,
paddingVertical: 4,
paddingHorizontal: 2,
color: colorScheme === "dark" ? "#ffffff" : "#000000"
}),

零食例子

Answer 2

在样式表中不能使用三元制。但是你可以像这样组合三元和样式表:

<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',
},

Answer 3

StyleSheet正在生成静态样式类，但是您可以定义一个light/dark类来使用并将其附加到数组中。这和你已经做过的没有太大的不同。

的例子:

<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小吃。