Правильный способ навигации вперед и назад по списку в React Native - PullRequest
Новая
       36

Правильный способ навигации вперед и назад по списку в React Native

0 голосов
/ 31 декабря 2018

Я новичок в React Native, и теперь я с самого начала собираю свое мобильное приложение (ранее реализованное с использованием jQuery и PhoneGap), и мне нужен совет, как добиться следующего:

На моемглавная панель инструментов У меня есть список почтовых ящиков (React FlatList) 

1. MailBox1
2. Mailbox2
3. Mailbox3

Затем, после того, как был выбран конкретный почтовый ящик, я хочу перечислить все элементы внутри него (на новом экране / компоненте / странице)): 

1. MailBox1_Item1
2. MailBox1_Item2

Каждый почтовый элемент имеет свои данные.После щелчка по почтовому элементу я хочу иметь возможность отображать его детали на новом экране / компоненте / странице. 

MailBox1_Item1 was created on 10/10/18
MailBox1_Item1 was created by SomeUser
etc.

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

Мое приложение до сих пор использует навигатор вкладок отсюда: 

import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";

import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'

import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'

export default createBottomTabNavigator({
  Home:{
    screen: HomeTab,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-home" color={tintColor} size={24}/>
        )
    }
  },
  Settings:{
    screen: SettingsTab,
    navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-settings" color={tintColor} size={24}/>
        )
    }
  }
},
{
  //router config
  initialRoutName: 'Home',
  order: ['Home', 'Settings'],
  //navigation for complete tab navigator
  navigationOptions:{
    tabBarVisible:true
  },
  tabBarOptions:{
    activeTintColor:'red',
    inactiveTintColor:'grey'
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

, а моя панель инструментов находится на вкладке "Домой".

1 Ответ

0 голосов
/ 31 декабря 2018

Что вам нужно сделать, это просто использовать StackNavigator для вашего маршрута на вкладке Dashboard, и ваш навигатор стека должен содержать следующие маршруты

  • MailList (Компонент для отображения почтыlist)

  • MailItemList (Компонент, чтобы показать список элементов, связанных с определенной почтой)

  • ItemDetail (Компонент, чтобы показать детали для элемента)

Код должен выглядеть следующим образом: 

const dashboardStack = createStackNavigator({
  MailListScreen: {screen: MailList},
  MailItemListScreen: {screen: MailItemList},
  ItemDetailScreen: {screen: ItemDetail},
});

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

Вы можете передать идентификатор (в целом, данные) из одного маршрута (экранного компонента) в другой, используя params, например: 

this.props.navigation.navigate('MailItemListScreen', {id: 1});

Выше строкаописывает навигус текущего экрана, скажем, от MailListScreen до MailItemListScreen, а также перенос полезной информации в качестве второго параметра в navigate.

Я бы порекомендовал вам сначала прочитать ответ-навигацию документы .

Надеюсь, это поможет.Удачного кодирования!

...