android - 当设备旋转时，React Native 组件不居中

Question

我是 React-Native 的新手，并且停留在这一点上。我有一个像这样的浮动操作按钮：

import {FloatingAction} from 'react-native-floating-action'; 
{other imports...}

export default Modules = ({navigation}) => {
{some variables...}

return (
    <SafeAreaView
      style={{
        backgroundColor: constants.darkGreyColor,
        flex: 1,
      }}>

    {other components...}

    <FloatingAction
        visible={flatListYOffset >= windowDimensions.height * 0.5}
        position="center"
        distanceToEdge={windowDimensions.height * 0.05}
        onPressMain={() =>
          flatListRef.current.scrollToOffset({
            animated: true,
          })
        }
        floatingIcon={scrollTopIcon}
        color={constants.darkPurpleColor}
        showBackground={false}
      /> 
    </SafeAreaView>
  );
};    
      

但是当旋转设备时： 它变成了这样，不得不重新加载我的应用程序而不改变设备的旋转来解决它。但是每次当设备相对于其初始位置旋转时都会发生这种情况。不管它在启动时处于哪个位置。我应该怎么办 ？

编辑

位置为“右”或“左”时没有问题。它位于设备的两侧，但无法计算“中心”。

标签： androidreactjsreact-nativebuttoncomponents