在 React Native 中，如何定位和滑动大于屏幕视图的元素？答案

【问题标题】：In React Native, how do I position and slide an element thats bigger than screen view?在 React Native 中，如何定位和滑动大于屏幕视图的元素？
【发布时间】：2017-08-07 01:09:34
【问题描述】：

在下图中，每个面板都是屏幕大小，它们作为一个大元素左右快速滑动。如果幻灯片过渡有问题，则 time = 0 可以，所以它是瞬时的。

每个面板的内容将在屏幕外保持安装状态，因为子项中有一个 web 视图，我想防止网页重新加载（如果面板重新安装会发生这种情况）。我该怎么做呢？（编辑：没有插件或现成的导航系统）

【问题讨论】：

标签： javascript react-native react-native-flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你可以使用 tab navigator 和 swipedEnabled: true 两个组件都将保持挂载状态。参考React-Navigation

一个抽象的例子是这样的

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

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

【讨论】：

我实际上是在寻找一种无需插件或现成的导航系统即可对其进行编码的方法。不过谢谢！
然后你可以使用 panresponder 来实现