当我启动我的react native应用程序时，我遇到这个错误消息:Invariant Violation: "backdropFilter" is not a valid style property.我检查了我没有在我的源代码中使用任何backdropFilter。但是我还是得到了这个错误。
完整错误信息:
Invariant Violation: "backdropFilter" is not a valid style property.
StyleSheet generated: {
"flexDirection": "column",
"height": 68,
"justifyContent": "center",
"backgroundColor": "rgba(248, 248, 248, 0.82)",
"backdropFilter": "blur(10px)",
"paddingHorizontal": 24
}
Valid style props: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomWidth",
"borderColor",
"borderEndColor",
"borderEndWidth",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStartColor",
"borderStartWidth",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"direction",
"display",
"elevation",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"includeFontPadding",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"start",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"
]
invariant
browser.js:38:14
styleError
StyleSheetValidation.js:77:11
validateStyleProp
StyleSheetValidation.js:35:16
validateStyle
StyleSheetValidation.js:55:6
module.exports.create
StyleSheet.js:356:8
css
emotion-primitives-core.browser.cjs.js:131:26
<global>
styles.ts:58:16
loadModuleImplementation
require.js:321:11
<global>
index.tsx:12
loadModuleImplementation
require.js:321:11
<global>
index.tsx:12
loadModuleImplementation
require.js:321:11
<global>
index.js:9
loadModuleImplementation
require.js:321:11
guardedLoadModule
require.js:201:44
global code
index.bundle?platform=ios&dev=true&minify=false:226443:3
"dependencies": {
"@emotion/core": "^11.0.0-next.10",
"@emotion/native": "^11.0.0-next.12",
"@emotion/react": "^11.0.0-next.10",
"@nozbe/watermelondb": "0.20.0",
"@nozbe/with-observables": "^1.0.5",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/netinfo": "^5.9.7",
"@react-native-community/push-notification-ios": "^1.7.1",
"@react-native-firebase/app": "^8.4.5",
"@react-native-firebase/messaging": "^7.8.11",
"@react-navigation/bottom-tabs": "^5.4.7",
"@react-navigation/native": "^5.4.2",
"@react-navigation/stack": "^5.3.9",
"@reduxjs/toolkit": "^1.6.2",
"@types/crypto-js": "^4.0.1",
"@types/jwt-decode": "^2.2.1",
"@types/lodash": "^4.14.160",
"@types/node-forge": "^0.9.5",
"@welldone-software/why-did-you-render": "^4.2.1",
"axios": "^0.19.2",
"crypto-js": "^3.3.0",
"jwt-decode": "^3.0.0",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"node-forge": "^0.10.0",
"observable-hooks": "^2.3.5",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-crypto": "^2.2.0",
"react-native-elements": "^2.0.2",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.1",
"react-native-msal": "^3.1.2",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.2",
"react-native-screens": "^2.7.0",
"react-native-vector-icons": "6.6.0",
"react-native-view-pdf": "^0.11.0",
"react-redux": "^7.2.5",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"rxjs": "^6.5.5"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^24.9.0",
"eslint": "^7.0.0",
"eslint-config-airbnb-typescript-prettier": "^2.1.1",
"eslint-plugin-jest": "^23.13.1",
"eslint-plugin-react-hooks": "^4.0.2",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.4",
"react-test-renderer": "16.11.0",
"typescript": "^3.9.3"
}
这是因为backdropFilter不是react-native支持的样式道具之一。你可以在你的样式表中删除它，程序应该能够工作。