使用react-native-navigator导航到另一个屏幕后，React Native Paper FAB.Group 图标保留在屏幕上

Question

每当我尝试在屏幕之间切换时，FAB 仍然可见，有时会干扰屏幕下部组件的功能，就好像在页面的下半部分呈现一个大正方形一样。

我尝试使用条件渲染，每次用户执行从页面移动的操作时都会切换条件渲染

作为快速修复，我选择切换 FAB 组件的可见性属性。

我希望能够将FAB绑定到一个屏幕上。我不确定在这种情况下最好的做法是什么。我在 github 上找到了对此问题的一个很好的回应，但是，他使用的组件已被弃用，我无法让它工作。 https://snack.expo.dev/@satya164/navigation-aware-portal-for-react-navigation。

注意：我使用 React（和 js/ts）才不到一年，而且大部分是自学的，并且严格使用功能组件而不是基于类的组件。我可以理解类组件，只是我不太擅长。

感谢所有花时间阅读本文的人。

Answer 1

弄清楚了：将父组件（您希望 FAB 锚定的位置）包装在 标签中：

<Portal.Host>
   <FabComponent/>
</Portal.Host>

并更改 fab 组件的颜色：

<Portal>
   <FAB.Group
      backdropColor={'#FFF'}
      open={open}
      visible
      icon={open ? 'close' : 'plus'}
      actions={[
        {
          icon: 'link',
          label: 'Link account',
          onPress: () => console.log('Pressed email'),
        },
      ]}
      onStateChange={onStateChange}
   />
</Portal>

Answer 2

谢谢兄弟，它也为我工作。 应用此后，我的 UI 有点中断，因此我创建了名为 VTFAB 的单独组件，并将屏幕数据作为子组件传递。 你可以看下面的例子：

这是如何使用该组件的：

import React from 'react';
import VTFAB from '../components/VTFAB/VTFAB';
import Profile from '../components/Profile/Profile';

const profile = () => {
  return (
    <VTFAB>
      <Profile />
    </VTFAB>
  );
};
export default profile;

实际 VTFAB 组件

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';
import { FAB, Portal } from 'react-native-paper';
import { SETTING_ACTIONS } from '../../utils/utils';
import { useAuth } from '../../store/AuthContext';

const VTFAB = ({ children, actionsButton }) => {
  const { onLogout } = useAuth();
  const navigation = useNavigation();
  const [state, setState] = useState({ open: false });
  const onStateChange = ({ open }) => setState({ open });
  const { open } = state;
  const defaultOptions = [
    { icon: 'logout', label: 'Logout', onPress: () => onLogout() },
    ...SETTING_ACTIONS(navigation),
  ];

  const actions = actionsButton.length ? actionsButton : defaultOptions;
  return (
    <Portal.Host>
      {children}
      <FAB.Group
        open={open}
        visible
        icon={open ? 'close' : 'plus'}
        actions={actions}
        onStateChange={onStateChange}
      />
    </Portal.Host>
  );
};
VTFAB.defaultProps = {
  actionsButton: [],
};

VTFAB.propTypes = {
  children: PropTypes.node.isRequired,
  actionsButton: PropTypes.arrayOf(
    PropTypes.shape({
      icon: PropTypes.string.isRequired,
      label: PropTypes.string,
      onPress: PropTypes.func.isRequired,
    }),
  ),
};

export default VTFAB;