反应导航全球 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>
);

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

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

Answer 1

正如@satya164 所指出的，您可以将 FAB 放在根组件中。此外，要访问导航操作，您可以使用导航容器的引用。

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

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