React Native中的导航问题

Question

我陷入了一个问题。有两个水平标签收件箱和答案：

每个都包含项目列表。一切都很好。

当用户点击INBOX列表视图中的任何项目时，我想浏览每个屏幕，并且对于答案也是如此。

如何实现？我尝试了一些东西，但它没有用。

这是代码：

import AuthenticationService from '../services/firebase/AuthenticationService';
import React , { Component,PureComponent } from 'react';
import PropTypes from 'prop-types';
import { View,
     Text, 
     navigator,
      Image,
      StyleSheet,
    TextInput,
    TouchableHighlight,
    ScrollView,
    FlatList,
    Dimensions,
    KeyboardAvoidingView,Platform } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { gstyles } from '../GlobalStyles';
import { Button } from 'react-native-elements';
import { createIcon } from '../navigation/TabBarIconFactory';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/FontAwesome';
import { ChatsComponent } from './ChatsComponent';
// import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const MyAuxNavigation = new StackNavigator({
  Home: {
    screen: ChatsComponent
  },
}, {
    headerMode: 'none',
    cardStyle: {
      backgroundColor: '#ffffff'
    }
  })

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

const FirstRoute = (props) => {
    // const {navigate}=this.props.navigation; 
    return(
    <View style={styles.container}>       
        <ScrollView style={styles.scrollview}>
            <FlatList style={styles.flatlists}
              data={[
                {key: 'MyAux Team', key1: '20', key2: 'map-marker'}, 
                {key: 'MyAux Team', key1: '20', key2: 'pencil-square'}, 
                {key: 'MyAux Team', key1: '20', key2: 'user'}, 
                {key: 'MyAux Team', key1: '20', key2: 'map-marker'}, 
                {key: 'MyAux Team', key1: '20', key2: 'pencil-square'}, 
                {key: 'MyAux Team', key1: '20', key2: 'user'}, 
                {key: 'MyAux Team', key1: '20', key2: 'map-marker'}, 
                {key: 'MyAux Team', key1: '20', key2: 'pencil-square'}, 
                {key: 'MyAux Team', key1: '20', key2: 'user'}, 
                {key: 'MyAux Team', key1: '20', key2: 'map-marker'}, 
                {key: 'MyAux Team', key1: '20', key2: 'pencil-square'}]}
                renderItem={({item}) => 
                  <View style={styles.flatlistContainer} >
                      <Image resizeMode='contain' source={require('../../assets/menu/myaux.png')} style={{flexDirection:'column',width:'15%'}} />
                      <View style={{flexDirection:'column',paddingLeft:10,marginTop:3,width:'65%'}}>
                          <Text style={styles.flatlisttext1}>{item.key}</Text> 
                          <Text style={{marginTop:3}}>Hey Bro ! Welcom to Native React Developement </Text>
                      </View>
                      <View style={{flexDirection:'column',marginTop:3,width:'20%'}}>
                          <Text style={{fontSize:12}}>28/12/2017</Text>
                          <TouchableHighlight onPress={()=>this.props.navigation.navigate('Home')} ><Text>fdfd</Text></TouchableHighlight>
                          <Icon name="circle" size={24} color="#ff0000" style={{textAlign:'right',marginRight:20,marginTop:1}} />
                      </View>
                  </View>
                }
              />
        </ScrollView>
      </View>    
      ) 
} ;