1

当我旋转设备时，旧视图会旋转但保持与原来相同的尺寸，仅使用屏幕的一部分，直到触摸屏幕，然后重新渲染。（这是在发布模式下：在调试模式下，它会自动重新渲染，但仅在延迟一两秒后）。这发生在模拟器和运行 iOS7 和 iOS9 的设备上。

这个问题是在我将我的应用程序从react-native0.24.1 升级到 0.32.0 后开始的。当然，这种升级就像从毛衣中拉出线一样，需要升级许多 3rd 方 react-native 库。特别是，react-native-router-flux从 3.24.1 升级到 3.35.0 需要对我的代码进行大量更改。

也就是说，我想不出任何可能导致此问题的更改。起初我怀疑react-native-orientation，升级特别棘手，所以我将它完全从项目中删除，这没有帮助。

onLayout我在顶层视图中添加了事件的回调，并带有console.log打印输出。这个事件显然不会在设备旋转后触发，直到屏幕被触摸。然后打印 onLayout 调试语句，同时重新渲染 react-native 代码。

因此，似乎本机代码不会通过桥将旋转事件发送到 javascript 代码，直到它可以搭载其他事件。

任何有关如何调试的建议将不胜感激。

更新：我只记得关于0.28中的flex:1重大更改的说明。react-native我想知道这是否与它有关？他们说：

如果您以前使用过 flex: 1 在不必要的情况下，此更改可能会破坏您的布局

问题是，什么时候有必要，你怎么知道它是否有必要？我似乎找不到关于它的文档。我总是flex:1到处使用，因为我发现如果你不这样做，就会发生坏事。在Scrollview文档中说：

忘记将 {flex: 1} 向下传输视图堆栈可能会导致此处出现错误

现在看来，如果你这样做，可能会发生坏事。真可惜。他们似乎真的想让你知道你在做什么。黑客要做什么？

更新2：这似乎不是问题。黑客所做的当然是hack。我{flex: 1}从顶层开始逐一删除。在大多数情况下，它破坏了布局，并且在任何情况下都没有解决这个问题。

4

3 回答 3

1

这显然是react-native 0.32.0.

我决定清理一切并从 npm 重新安装：

rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && npm cache clean && npm i

当我这样做时，它捡起来了react-native 0.32.1，问题就消失了。 0.32.1有一个似乎可能与此有关的提交。

于 2016-09-14T20:01:53.830 回答
0

它在 RN 0.44.0 中仍然不起作用，我检查每个渲染中的屏幕宽度并相应地调整子项的大小，但render不会在设备旋转时调用。只有当我按 Cmd-D 刷新时，所有内容才会正确重新渲染。

render() {
   let { width } = Dimensions.get('window');
   ...
}
于 2017-05-22T08:52:13.610 回答
0

要在旋转后重新渲染，请尝试将其放在视图的 contructor() 中：

Dimensions.addEventListener('change', () => {
  this.setState({});
});
于 2021-10-26T15:55:07.880 回答