样式表中的三元运算符 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

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

<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 2

StyleSheet 正在生成静态样式“classes”，但您可以定义一个 light/dark class 来使用并将其附加到数组。不过，这与您已经完成的并没有太大区别。

示例：

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

Answer 3

试试这个：在你 TextInput:

style={styles.textInput(colorScheme)}

并在 样式表

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

Snack Example

样式表中的三元运算符 React Native

Ternary Operator React Native in StyleSheet

css

reactjs

react-native

tsx

react-native-stylesheet