Question

我对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',
  }
});

并且我的信息中心位于“首页”标签上。

Answer 1

您应该做的是，仅使用StackNavigator作为“标签”的信息中心路线，并且您的堆栈导航器应包含以下路线

MailList（显示邮件列表的组件）
MailItemList（组件，用于显示与特定邮件相关的项目列表）
ItemDetail（组件，用于显示项目的详细信息）

代码应类似于：

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

有了这个，您应该使用每个组件的componentDidMount来启动您的网络操作以获取所需的数据以将其显示在屏幕上，对于依赖于以前的类似列表项屏幕的屏幕进行获取给定邮件的项目列表，只需将邮件的id传递到下一个屏幕，然后使用该ID发起网络调用即可获取所需的数据。

您可以使用params将ID（通常是数据）从一条路线（屏幕组件）传递到另一条路线，如下所示：

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

上面的行描述了从当前屏幕导航，比如说从MailListScreen到MailItemListScreen，并且在navigate中还携带了有效载荷信息作为第二参数。

我建议您先阅读反应导航docs。

希望这会有所帮助。祝您编码愉快！

在React Native中浏览和转发我的列表项的正确方法

1 个答案: