Question

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

将我的应用从react-native 0.24.1升级到0.32.0后，此问题就开始了。当然，这种升级就像从毛衣中拔出线程一样，因此需要升级许多第三方反应原生库。特别是，将react-native-router-flux从3.24.1升级到3.35.0需要对我的代码进行大量更改。

那就是说，我无法想到我改变的任何可能导致这个问题的事情。起初我怀疑react-native-orientation，这对升级来说特别棘手，所以我只是将它从项目中完全删除，这对我们没有帮助。

我在顶级视图中添加了onLayout事件的回调，其中console.log打印输出。在旋转设备之后，此事件显然不会被触发，直到触摸屏幕。然后打印onLayout调试语句，并且react-native代码同时重新呈现。

因此，本机代码似乎没有通过桥接器将旋转事件发送到javascript代码，直到它可以搭载其他一些事件。

非常感谢有关如何调试此内容的任何建议。

更新：我刚刚记得关于flex:1 0.28中react-native突破变化的说明。我想知道这可能与它有关吗？他们说：

如果你之前使用过flex：1那么没有必要这种改变可能会破坏你的布局

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

忘记在视图堆栈中向下传输{flex：1}可能会导致错误

如果你这样做，现在似乎很糟糕。游民。他们似乎真的希望你知道你在做什么。什么是黑客？

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

Answer 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有commit似乎可能与此有关。

Answer 2

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

render() {
   let { width } = Dimensions.get('window');
   ...
}