React Navigation 全球 FAB

Question

我正在使用 react-navigation v5，结果 App.js 像这样

const MainStack = createStackNavigator();

export default () => (
  <NavigationNativeContainer>
    <MainStack.Navigator
      screenOptions={{
        header: () => <AppbarHeader />,
      }}
    >
      <MainStack.Screen name="index" component={index} />
      <MainStack.Screen name="alternate" component={alternate} />
    </MainStack.Navigator>
  </NavigationNativeContainer>
);

我想添加一个在 index 和 alternate 页面底部可见的浮动操作 (FAB) 按钮，允许用户显示模态框目前省略。现在我觉得唯一的解决方案是将我的 FAB 组件放在 index 和 alternate 组件中，但这似乎不正确，因为它不应该重新渲染和过渡到页面.它应该浮动在页面转换之上。我觉得它应该更像是某种全局导航器，但我不确定它应该如何与上面显示的现有 StackNavigator 一起使用。

我期待所提供的任何解决方案。

Answer 1

如果您真的希望它是全局的，请将其放在您的根组件中，而不是在屏幕中。

const App = () => (
  <>
    <NavigationNativeContainer>
      // ...
    </NavigationNativeContainer>
    <FAB />
  </>
);

Answer 2

如@satya164 所述，您可以将 FAB 放在根组件中。此外，对于 access to navigation actions，您可以使用对导航容器的引用。

const App = () =>{
  const ref = React.useRef(null);

  return (
  <>
    <NavigationNativeContainer ref={ref}>
      // ...
    </NavigationNativeContainer>
    <FAB onPress={() => ref.current && ref.current.navigate('A SCREEN')}/>
  </>
);

React Navigation 全球 FAB

React Navigation Global FAB

reactjs

floating-action-button

react-native

react-navigation