reactjs - react 导航全局 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>
);

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

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

Answer 1

正如@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')}/>
  </>
);