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

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>
);

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

React Native Navigation Wrap All Screens in a View

javascript

react-native

react-navigation

react-navigation-v5