Блог

Используя 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>
  );
}
  

Внутри навигационного контейнера вам разрешено использовать только Navigator или Screen. Таким образом, вы не можете переносить Stack.Screen ни с каким другим компонентом.

Что вы можете сделать, так это обернуть компонент экрана:

ScreenTemplate Возможно, создайте новый компонент, вы можете выбрать имя. Затем используйте этот компонент для реализации логики обхода клавиатуры и прокрутки.

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

На любом другом экране:

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