Реагировать на состояние навигации. Параметры не работают

Это не работает. Все перепробовала. Ничего не работает. state.params просто не существует, если вы делаете продвинутое приложение.

У меня такая проблема с реагирующей "навигацией". В руководстве сказано, что там должен быть объект params https://reactnavigation.org/docs/navigation-prop.html#state-the-screen-s-current-state-route Но это не так.

Я установил такой параметр id на экране 1, когда перешел на экран 2:

 <TouchableWithoutFeedback onPress = { ()=> this.props.navigation.navigate('FontsTab', { id: item.id }) } style = {styles.listHeader} >
                <View  style = {styles.listRowContainer}>
                    <View  style = {styles.listinside1Container}>
                        <Image  style = {styles.listImage} source = {item.icon} />
                        <View  style = {styles.listContainer} onPress = {(event) => this._selectedItem(item.text)}  >
                            <Text style = {styles.listHeader} >
                              {item.title}
                            </Text>
                            <Text  style = {styles.listValue} >{item.value}</Text>
                            <Image 
                                style = {{width: 50, height: 50}}
                                source = {{uri: item.img}}
                            />

                        </View>
                    </View>

                                </View>
            </TouchableWithoutFeedback>

Но это не работает. На экране 2 я не могу использовать state.params:

     <ScrollView style = {styles.container}>
          <Text>{ JSON.stringify(this.props.navigation)}</Text>
          <Text>TEST{ state.params }</Text>
          <Image
              style = {{width: 150, height: 150}}
              source = {{uri: this.state.dataSource.img}}
          />
          <Text  style = {styles.textStyle} >{this.state.dataSource.text}</Text>
      </ScrollView>

state.params просто ничего не возвращает. Что я могу с этим поделать?

Полный класс для screen2:

class Fonts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            params: null,
            selectedIndex: 0,
            value: 0.5,
            dataSource: null,
            isLoading: true
        };
        this.componentDidMount = this.componentDidMount.bind(this);
    }
    getNavigationParams() {
        return this.props.navigation.state.params || {}
    }

    componentDidMount(){
        return fetch('http://www.koolbusiness.com/newvi/4580715507220480.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    ...this.state,
                    isLoading: false,
                    dataSource: responseJson,
                }, function(){
                });
            })
            .catch((error) =>{
                console.error(error);
            });
    }
  render() {
      if (this.state.isLoading){
          return(
              <View style = {{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    return (
      <ScrollView style = {styles.container}>
          <Text>{ JSON.stringify(this.props)}</Text>
          <Text>TEST{ this.state.params }</Text>
          <Image
              style = {{width: 150, height: 150}}
              source = {{uri: this.state.dataSource.img}}
          />
          <Text  style = {styles.textStyle} >{this.state.dataSource.text}</Text>
      </ScrollView>
    );
  }
}

В моем приложении эту боль можно воспроизвести с помощью простой кнопки на экране screen1:

<Button onPress = {() => navigate('FontsTab', { name: 'Brent' })} title = "Go to Brent's profile" />

Затем переключение на FontsTab работает, но параметры не находятся в объекте состояния:

У меня также есть этот код для просмотра вкладок

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

import { StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import FontsHome from '../views/fonts_home';
import FontsDetails from '../views/fonts_detail';

const FontsTabView = ({ navigation }) => (
  <FontsHome banner = "Fonts" navigation = {navigation} />
);

const FontsDetailTabView = ({ navigation }) => (
  <FontsDetails banner = "Fonts Detail" navigation = {navigation} />
);

const FontsTab = StackNavigator({
  Home: {
    screen: FontsTabView,
    path: '/',
    navigationOptions: ({ navigation }) => ({
      title: '',
      headerLeft: (
        <Icon
          name = "menu"
          size = {30}
          type = "entypo"
          style = {{ paddingLeft: 10 }}
          onPress = {() => navigation.navigate('DrawerOpen')}
        />
      ),
    }),
  },
  Detail: {
    screen: FontsDetailTabView,
    path: 'fonts_detail',
    navigationOptions: {
      title: 'Fonts Detail',
    },
  },
});

export default FontsTab;