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