时间戳

首页 > 解决方案 > React Native Navigation 将所有屏幕包裹在一个视图中

javascript - React Native Navigation 将所有屏幕包裹在一个视图中

问题描述

使用 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>
  );
}

标签： javascriptreact-nativereact-navigationreact-navigation-v5

解决方案

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

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

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

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

在任何其他屏幕中：

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

推荐阅读