React Native 导航将所有屏幕包裹在一个视图中

Question

使用react-navigation v5，如何将所有屏幕单独包装在滚动视图和键盘安全视图中？

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Test" component={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

Answer 1

在导航容器内，您只能使用 Navigator 或 Screen。所以你不能Stack.Screen用任何其他组件包装。

你可以做的就是包装屏幕组件：

也许创建一个新组件ScreenTemplate，您可以决定名称。然后使用此组件来实现键盘避免和滚动逻辑。

const ScreenTemplate = ({children}) => (
   <AnyWrapperComponent>
      {children}
   </AnyWrapperComponent> 
);

在任何其他屏幕中：

const HomeScreen = () => (
   <ScreenTemplate>
     //implement anything you want
      <BlaBlaComponent />
    //etc..
   </ScreenTemplate>
);