React Native：没有fixed属性，如何制作一个悬浮按钮

在React Native中，由于没有直接的fixed属性，我们需要使用其他方式来实现一个始终悬浮在屏幕顶部的按钮。这可以通过创建一个自定义的悬浮按钮组件来完成，该组件会根据屏幕尺寸和当前滚动位置来动态调整其位置。
下面是一个简单的例子，演示了如何创建一个始终悬浮在屏幕顶部的按钮：

1. 首先，我们需要在React Native项目中安装react-native-safe-area-context库。这个库可以帮助我们获取屏幕的高度和宽度，以便我们可以正确地定位我们的悬浮按钮。

   npm install react-native-safe-area-context

2. 接下来，我们需要创建一个自定义的悬浮按钮组件。我们可以使用react-native-safe-area-context库中的SafeAreaContext组件和Positioning组件来实现这个目标。

   import React, { useState } from 'react';
   import { SafeAreaContext, Positioning } from 'react-native-safe-area-context';
   const FloatingButton = ({ children }) => {
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const { height: screenHeight, width: screenWidth } = SafeAreaContext.getSafeArea();
   // 计算按钮应该放置的位置，使其始终位于屏幕顶部中央
   const calculatePosition = () => {
   const buttonHeight = 200; // 按钮的高度
   const offsetTop = (screenHeight - buttonHeight) / 2; // 计算垂直方向上的偏移量
   const offsetLeft = (screenWidth - 200) / 2; // 计算水平方向上的偏移量，这里假设按钮宽度为200px
   setPosition({ top: offsetTop, left: offsetLeft });
   };
   // 在组件挂载时和屏幕尺寸变化时调用计算位置函数
   useEffect(() => {
   calculatePosition();
   }, [screenHeight, screenWidth]);
   return (
   <Positioning position={position}>
   {children}
   </Positioning>
   );
   };

3. 最后，我们可以在需要的地方使用这个自定义的悬浮按钮组件。例如，我们可以将其放在一个屏幕的顶部：

   import React from 'react';
   import { View, Text, ScrollView } from 'react-native';
   import FloatingButton from './FloatingButton'; // 导入自定义的悬浮按钮组件
   const MyScreen = () => {
   return (
   <View style={{ flex: 1 }}>
   <ScrollView>
   <Text>这是一个可以滚动的视图，而悬浮按钮始终位于顶部中央。</Text>
   <Text>滚动查看效果。</Text>
   </ScrollView>
   <FloatingButton>
   <Text>这是一个悬浮按钮</Text>
   </FloatingButton>
   </View>
   );
   };