在React Native中来回导航我的列表项的正确方式

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

您应该做的是，只需为选项卡的Dashboard路由使用StackNavigator，并且您的Stack导航器应该包含以下路由

• MailList(显示邮件列表的组件)

• MailItemList(显示与特定邮件关联的项目列表的组件)

• 项目详细信息(显示项目详细信息的组件)

代码应该看起来像：

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中的第二参数。

我建议您先阅读react导航文档。