在下图中,每个面板都是屏幕的大小,它们作为一个大元素左右快速滑动。如果幻灯片过渡有问题,则 time = 0 可以,所以它是瞬时的。
每个面板的内容将在屏幕外保持安装状态,因为孩子中有一个 web 视图,我想防止网页重新加载(如果面板重新安装会发生这种情况)。我该怎么做呢?(编辑:没有插件或现成的导航系统)
在下图中,每个面板都是屏幕的大小,它们作为一个大元素左右快速滑动。如果幻灯片过渡有问题,则 time = 0 可以,所以它是瞬时的。
每个面板的内容将在屏幕外保持安装状态,因为孩子中有一个 web 视图,我想防止网页重新加载(如果面板重新安装会发生这种情况)。我该怎么做呢?(编辑:没有插件或现成的导航系统)
这是使用 CSS 和 HTML 的方法,您可以将其转换为使用 React Native。
<html>
<header>
<style>
#body{
display: flex;
justify-content: center;
width: 200vw;
}
#inner{
width: 100%;
height: 100%;
display: flex;
background: #de9999;
align-items: center;
}
#body #body-left{
flex: 1 0 50%;
height: 100%;
background: green;
}
#body #body-right{
flex: 1 0 50%;
height: 100%;
background: lightgrey;
}
</style>
</header>
<body>
<div id="body">
<div id="inner">
<div id="body-left"></div>
<div id="body-right"></div>
</div>
</div>
</body>
</html>
您可以使用带有 swipedEnabled 的选项卡导航器:true 两个组件也将保持挂载状态。参考反应导航
一个抽象的例子是这样的
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
主页和通知将成为您的组件