Открыть другой экран React-navigation 3 .. flatlist

Question

Я получил ошибку, когда я пытаюсь перейти на другой экран, нажав TouchableOpacity ... «Вы должны явно отобразить один навигатор в своем приложении, а другой навигатор должен быть отображен путем включения их в этот навигатор».Я использую реагирующую навигацию 3, и вот мои 4 компонента:

это основной компонент:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {createBottomTabNavigator , createNavigationContainer} from 'react-navigation'
import Home from './Compnents/Home';
import CreatePost from './Compnents/CreatePost';
import Notifications from './Compnents/Notifications';

 export class App extends React.Component {
  render() {
    return (
      <View>          
      </View>
    );
  }
}

const NavigationBar = createBottomTabNavigator({
  Home:{ screen : Home , 
  navigationOptions:{
    tabBarLabel:'home',
  }},
  Notifications:{screen : Notifications,
    navigationOptions:{
      tabBarLabel: 'notifi',
    }},
    CreatePost : {screen :CreatePost , 
    navigationOptions:{
      tabBarLabel: 'createpost',
    } },

});
export default createNavigationContainer(NavigationBar);....

второй, который включает компонент NotificationList:

import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import NotificationsList from './NotificationsList';

export default class Notifications extends React.Component {

  render() {
    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}> AAA </Text>
                           <NotificationsList />   
      </View>
    );
  }
}...

и, наконец, 3-й, который, когда я нажимаю на элемент, у меня появляется ошибка

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import {createStackNavigator , createNavigationContainer,} from 'react-navigation';
import DonationRoom from './DonationRoom';

 const Room =createStackNavigator({
   DonationRoom : DonationRoom
 })

export default createNavigationContainer ( Room);
class NotificationsList extends React.Component {

  ItemClickListener(){

    navigate('DonationRoom');
  }

  render() {

    return (   
      <View  style={styles.container} >

            <FlatList
            data={[
                {timestamp : '2018/12/26' , comment : 'aaaaa'}  ,
                {timestamp : '2018/12/26' , comment : 'aaaaaaa'},
            ]}
            renderItem={({item})=>
            <TouchableOpacity  style={styles.item} 
            onPress={() => this.ItemClickListener()}>
                <View style={{flexDirection : 'row-reverse'}}>
                      <Text > {item.timestamp} </Text>
                    </View>
                    <Text style={{marginTop : 10 , margin:3}}> {item.comment} 
    </Text>
                </TouchableOpacity>
        }
            />
      </View>
    );
  } 
}...

, чтобы открыть эту страницу:

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

export default class DonationRoom extends React.Component {

  render() {

    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}>aaa </Text>
         <Text > Donaiton Room </Text>

      </View>
    );
  }
}

Answer 1

Я нашел решение, но все еще думаю, что это не правильный путь, но он работает:

во втором компоненте "Notificatins", все, что мне нужно сделать, чтобы создать StackNavigator, и передать реквизит навигации в3-й компонент "NotificationsList", так что, чтобы быть похожим на это:

class Notifications extends React.Component {

  render() {   
    return (
      <View  style={styles.container} >
      <Text style={styles.HomeText}> aaa</Text>

               <NotificationsList navigation={this.props.navigation}/>

      </View>
    );
  }
}
export default  StackNavigator = createStackNavigator({
  Notifications : {screen: Notifications , 
    navigationOptions:{
      header : null
    }},
  DonationRoom :{screen : DonationRoom ,
   navigationOptions:{
      title : 'more'
   }},
});

затем на 3-м компоненте я добавил this.props.navigation.navigate('DonationRoom'); к функции ItemClickListener().

И это все, янадеюсь, что есть лучшее или подходящее решение, чем это Thnx ..