Как перейти на другую страницу при нажатии на текст внутри страницы с вкладками?

Question

У меня есть страница с двумя вкладками. И у меня есть список текста во второй вкладке. При нажатии на текст я пытаюсь вызвать другую страницу с передаваемыми параметрами. Возможно ли это сделать? как мы можем этого добиться? Я могу перемещаться, когда нажимаю на значки заголовков на панели приложений. Но не мог перемещаться внутри вкладки.

import React, { useState, useEffect } from 'react';
import { View, FlatList, ScrollView, RefreshControl, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import {
  Button,
  withTheme,
  Appbar,
  Divider,
  List, Chip, Menu, Card, Paragraph, Title
} from 'react-native-paper';
import Icon from 'react-native-vector-icons/AntDesign';
import AsyncStorage from '@react-native-community/async-storage';

const requestedItems = [];

const Edit = () => {
  const [data, setData] = useState([{ 'name': 'abc', 'id': '1' }, { 'name': 'xyz', 'id': '2' }]);
  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={() => <Divider />}
        renderItem={({ item }) => (
          <List.Item
            title={`${item.id.toString()}`}
            description={`${item.name}`}
            onPress={() => navigation.navigate('edit', { details: item, isEdit: false })}
            titleStyle={{ textDecorationLine: 'underline', color: 'blue' }}
          />
        )}
      />
    </View>
  )
}

const Draft = () => {
  return (
    <View >
    </View>
  )
}

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

const Requests = ({ navigation }) => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'draft', title: 'Draft' },
    { key: 'edit', title: 'Edit' },
  ]);

  const renderScene = ({ route }) => {
    switch (route.key) {
      case 'draft':
        return <Draft />;
      case 'pending':
        return <Edit />;
    }
  };

  const _back = () => {
    navigation.goBack()
  }

  const _navigateToEdit = () => {
    navigation.navigate('edit', {
      details: [],
      isEdit: false
    })
  }

  return (
    <>
      <Appbar.Header>
        <Appbar.Action icon={() => (<Icon name="home" color="#ffffff" size={25} />)} onPress={_back} />
        <Appbar.Content title="Test" />
        <Appbar.Action icon={() => (<Icon name="plus" color="#ffffff" size={25} />)} onPress={_navigateToEdit} />
      </Appbar.Header>
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={initialLayout}
      />
    </>

  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

export default Test;