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

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

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

反应导航全球FAB

2 个答案: