Question

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

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

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

Answer 1

我不知道反应导航是否具有滑动功能，但您可以使用任何其他滑动库。

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

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

Answer 2

这个图书馆为我工作。安装非常轻。而且实现很简单。

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

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

  />

Answer 3

要通过滑动浏览，可以使用在createMaterialTopTabNavigator版本中引入的2.x。通过点击或水平滑动，您可以在不同的路线之间切换。 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

Answer 4

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

Answer 5

从中间页面开始，这是3页的刷卡器（只需导入屏幕）

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

反应原生导航 - 滑动到下一个屏幕

5 个答案: