iOS 上的 React Native 默认 LayoutAnimations

Question

在我看来，React Native 仅在 iOS 上添加了默认的 LayoutAnimations。我对 iOS & Android 和 iOS 布局有完全相同的代码，并且 CSS 更改是动画的。例如 hiding/showing 某些视图具有 spring 或 easeIn 动画。或者更改 Text 值似乎有某种 fade 动画。但是我没有在我的代码中的任何地方定义它们。我也在使用 react-native-paper，起初我认为这是造成这种情况的原因，但我将其与其他可能导致这种情况的库一起删除了，但它仍在发生。基本上它只发生在 react-native 的组件上。为了以防万一，我也会把我的 package.json 放在下面。有人有同样的问题吗？是否可以在 iOS 上完全禁用 LayoutAnimations？

"dependencies": {
"@react-native-community/async-storage": "^1.9.0",
"@react-native-community/geolocation": "^2.0.2",
"@react-native-community/masked-view": "^0.1.7",
"@react-native-community/netinfo": "^5.6.1",
"@react-native-community/push-notification-ios": "^1.1.1",
"@react-native-firebase/analytics": "7.4.2",
"@react-native-firebase/app": "8.3.1",
"@react-native-firebase/auth": "8.3.3",
"@react-native-firebase/crashlytics": "8.3.1",
"@react-native-firebase/firestore": "7.5.3",
"@react-native-firebase/in-app-messaging": "7.3.2",
"@react-native-firebase/messaging": "7.7.1",
"@react-native-firebase/perf": "7.3.2",
"@react-native-firebase/storage": "7.3.3",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"axios": "^0.20.0",
"firestore-parser": "^0.9.0",
"geolib": "^3.2.1",
"google-polyline": "^1.0.3",
"i18n-js": "^3.7.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-moment": "^0.9.7",
"react-native": "0.63.3",
"react-native-app-intro-slider": "^4.0.2",
"react-native-awesome-card-io": "^0.9.0",
"react-native-camera": "^3.19.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-fbsdk": "^3.0.0",
"react-native-gesture-handler": "^1.6.0",
"react-native-localize": "^1.4.0",
"react-native-map-clustering": "^3.1.2",
"react-native-maps": "0.26.1",
"react-native-masked-text": "^1.13.0",
"react-native-paper": "^4.0.1",
"react-native-push-notification": "^5.0.1",
"react-native-raw-bottom-sheet": "^2.0.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^3.1.4",
"react-native-screens": "^2.2.0",
"react-native-status-bar-height": "^2.5.0",
"react-native-svg": "^12.1.0",
"react-native-vector-icons": "7.0.0",
"react-native-version-number": "^0.3.6",
"react-native-webview": "^10.7.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
}

作为解决方法，我尝试通过定义自己的 LayoutAnimation 来覆盖动画。然后我收到以下警告：

Warning: Overriding previous layout animation with new one before the first began: <RCTLayoutAnimationGroup: 0x283352f70; creatingLayoutAnimation: <RCTLayoutAnimation: 0x282628f80; duration: 0.700000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 1;>; updatingLayoutAnimation: <RCTLayoutAnimation: 0x2826285c0; duration: 0.700000; delay: 0.000000; property: (null); springDamping: 0.400000; initialVelocity: 0.000000; animationType: 0;>; deletingLayoutAnimation: <RCTLayoutAnimation: 0x282628040; duration: 0.700000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 1;>> -> <RCTLayoutAnimationGroup: 0x2832836f0; creatingLayoutAnimation: <RCTLayoutAnimation: 0x282629880; duration: 0.100000; delay: 0.000000; property: opacity; springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; updatingLayoutAnimation: <RCTLayoutAnimation: 0x2826298c0; duration: 0.100000; delay: 0.000000; property: (null); springDamping: 0.000000; initialVelocity: 0.000000; animationType: 4;>; deletingLayoutAnimation: (null)>.

Answer 1

在您的地图视图设置中的道具内 animationEnabled={false}。出于某种原因，animationEnabled 道具正在影响其他视图并向它们添加动画。

iOS 上的 React Native 默认 LayoutAnimations

React Native default LayoutAnimations on iOS

layout-animation

react-native

ios-animations