React Native Navigation — проведите пальцем к следующему экрану

У меня очень простая конфигурация для реагирования на нативную навигацию.

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

Я не могу найти в документации какой-либо API для перехода с экрана 1 на экран 2. Вы знаете, возможно ли это вообще?


react-native react-native-navigation
person feerlay    schedule 10.02.2018    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Это 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);
person Nour    schedule 23.07.2019
comment
Нет, не то чтобы я знаю, вы можете использовать жест смахивания (вверх и вниз) с обычной навигацией (с анимацией для навигации со слайдом из анимации вверх или вниз), но это не смахивание, это жест - person Nour; 24.12.2019

arrow_upward
4
arrow_downward

Я не знаю, что в реакционной навигации есть функция смахивания, но вы можете использовать любую другую библиотеку смахивания.

Пример библиотеки: https://www.npmjs.com/package/react-native-swipe-gestures

В этой библиотеке вы можете использовать функции прокрутки, а в функциях прокрутки вы можете перейти на любую страницу.

person VolkanSahin45    schedule 10.02.2018

arrow_upward
2
arrow_downward

Для навигации с помощью свайпа вы можете использовать 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

person kumar parth    schedule 13.10.2019

arrow_upward
1
arrow_downward

Эта библиотека работала для меня. Установка была довольно легкой. И реализация была простой.

Вы можете смахивать или нажимать элементы меню для перехода между экранами.

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

  />
person L.U.    schedule 21.09.2019

arrow_upward
0
arrow_downward

теперь есть пакет для того, что вы хотите https://github.com/react-navigation/material-bottom-tabs

person Abanoub Istfanous    schedule 14.06.2019