在React Native中,如何定位和滑动比屏幕视图更大的元素?

时间:2017-08-07 01:09:35

标签: javascript react-native react-native-flexbox

在下图中,每个面板都是屏幕尺寸,它们可以作为一个大元素左右快速滑动。如果幻灯片过渡有问题,那么时间= 0就可以了,所以它是瞬间完成的。

每个面板的内容都要在屏幕外保持安装,因为孩子们有一个webview,我想阻止网页重新加载(如果面板重新安装会发生这种情况)。 我该怎么做呢? (编辑:没有插件或现成的导航系统)

explanation

2 个答案:

答案 0 :(得分:1)

您可以使用带有swipedEnabled的标签导航器:true两个组件也将保持挂载状态。请参阅React-Navigation

abtract示例就像这样

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

主页和通知将成为您的组件

答案 1 :(得分:1)

以下是如何使用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>