升级Expo 48.0.4后条件样式引发警告的解决咨询

问题根源 #

你犯了React Native StyleSheet的常见错误：在StyleSheet.create里嵌套定义样式。selected样式被放在calendarCell内部，导致最终传递给组件的style对象里包含了selected这个无效键（React Native只识别width、borderWidth这类原生样式属性，不接受嵌套对象），因此触发警告。

修复步骤 #

1. 调整样式表结构
   把selected从calendarCell里移出来，作为StyleSheet的顶级样式：

const styles = StyleSheet.create({
  calendarCell: {
    width: "12%",
    margin: 2,
    textAlign: "center",
  },
  selected: {
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: Colors.BLUE,
    borderRadius: 4,
  },
});

2. 修正组件中的样式引用
   把原来的styles.calendarCell.selected改成直接引用styles.selected：

<TouchableOpacity
  key={`day-${dayIndex}`}
  style={[
    styles.calendarCell,
    flexStyles.flexRow,
    flexStyles.justifyCenter,
    flexStyles.alignCenter,
    dayjs(selectedDate).isSame(day, "date") && styles.selected,
  ]}
>

这样修改后，style数组里的每一项都是合法的样式对象，不会再出现无效键的警告。

内容的提问来源于stack exchange，提问作者julziemoon