React Native Navigation - 滑动到下一个屏幕答案

【问题标题】：React Native Navigation - swipe to next screenReact Native Navigation - 滑动到下一个屏幕
【发布时间】：2018-02-10 10:42:10
【问题描述】：

我有一个非常简单的反应原生导航配置

Navigation.startTabBasedApp({
  tabs: [
    {
      label: "One",
      screen: "example.FirstTabScreen",
      title: "Screen One"
    },
    {
      label: "Two",
      screen: "example.SecondTabScreen",
      title: "Screen Two"
    }
  ]
}

我在文档中找不到任何用于从屏幕 1 滑动到屏幕 2 的 API。你知道这是否可能吗？

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

我不知道 React Navigation 有滑动功能，但您可以使用任何其他滑动库。

示例库：https://www.npmjs.com/package/react-native-swipe-gestures

在这个库中，您可以使用滑动功能，并且在滑动功能中您可以导航到任何页面。

【讨论】：

【解决方案2】：

这是从中间页开始的 3 页 Swiper（只需导入您的屏幕）。

将导航中的此滑动导入为屏幕（您可以导航到滑动或您可以导航到滑动下的任何屏幕）

import {
  createMaterialTopTabNavigator,
  createAppContainer
} from "react-navigation";

const SwipeTabs = createMaterialTopTabNavigator(
  {
    screen1: { screen: screen1},
    screen2: { screen: screen2},
    screen3: { screen: screen3}
  },
  {
    initialRouteName: "screen2",
    animationEnabled: true,
    tabBarOptions: {
      showLabel: false,
      showIcon: false,
      style: { height: 0 }
    }
  }
);

export default createAppContainer(SwipeTabs);

【讨论】：

不，我不知道，您可以使用滑动手势（向上和向下）和普通导航（通过动画从向上或向下动画滑动导航）但这不是滑动手势

【解决方案3】：

对于通过滑动导航，您可以使用在 react-navigation 2.x 版本中引入的createMaterialTopTabNavigator。它允许您通过点击路线或水平滑动来在不同路线之间切换。 https://reactnavigation.org/docs/en/material-top-tab-navigator.html

如果您想要slider 或swipe tabs，您可以使用以下内容：- https://www.npmjs.com/package/react-native-app-intro-slider

对于同一屏幕上的multiple tabs：- https://www.npmjs.com/package/react-native-tab-view

【讨论】：

【解决方案4】：

这个库对我有用。安装非常轻巧。实施很简单。

您可以滑动或点按菜单项在屏幕之间导航。

https://github.com/react-native-community/react-native-tab-view

文档似乎也很详细。他们在这里列出了很多元素和参数。对我来说唯一的事情是我花了一段时间才弄清楚如何向选项卡添加自定义。没有例子。为了节省您一些时间（希望如此），这是我的组件的样子。注意我是如何添加额外的东西来自定义样式的。

  <TabView
    navigationState={this.state}
    renderScene={SceneMap({
      first: App1,
      second: App2,
      third: App3
    })}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
    tabBarPosition="bottom"

    renderTabBar={props =>
    <TabBar
      {...props}
      indicatorStyle={{ 
        backgroundColor: 'blue', 
        height:3 }}
      style={{ backgroundColor: 'lightgrey' }}
      renderLabel={({ route, focused, color }) => (
      <Text style={{ 
        fontSize: 18,
        fontWeight: 'bold', 
        margin: 10 }}>
        {route.title}
      </Text>
    )}
    />
  }
  // End of renderTabBar

  />

【讨论】：

【解决方案5】：

现在有包可以做你想做的事 https://github.com/react-navigation/material-bottom-tabs

【讨论】：