React Navigation Global FAB

Question

bounty到期在7天内。该问题的答案有资格获得+ 500声望赏金。Mike正在寻找来自信誉良好的来源的答案。

我正在使用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一起使用。

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

我正在使用react-navigation v5并最终获得App.js，例如const MainStack = createStackNavigator（）;导出默认（）=>（[]

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