Передайте переменную в bottomTabNavigator

Question

Я хочу передать переменную с одной страницы через мой bottomTabNavigator на другую страницу, без необходимости использовать stackNavigator или создавать дополнительную «вкладку» в моем tabNavigator, так сказать,

Я попытался передать и получить переменную, как описано ниже.

Как я пытаюсь передать переменную:

onPress={() => this.props.navigation.navigate('IndividualCardPage', 
{"name":this.props.cards.name})}

Как я пытаюсь получить переменную на другой странице:

values = {
        name: this.props.navigation.getParam('name','empty')
    }
    componentDidMount() {
        console.log(this.values.name)
    }

Я ожидаю перейти к «IndividualCardPage» и использовать там переменную «name». То, что происходит, является одной из этих двух вещей: 1. Ничего не происходит при нажатии кнопки. 2. Появится сообщение об ошибке «невозможно найти переменную: имя». Есть идеи? Заранее спасибо

Answer 1

Для навигации по onPress мне пришлось использовать этот код:

onPress={() => this.props.navigation.navigate('iCardPage', 
{"name":this.props.cards.name})} 

Мне также пришлось создать стекавигатор:

import React from 'react';
import {createStackNavigator} from "react-navigation";
import IndividualCardPage from '../Pages/IndividualCardPage';
import Cards from "../Pages/CardPage";

export default createStackNavigator({
Cards: {
    screen: Cards,
    navigationOptions: ({ navigation }) => ({
        title: 'Selecteer een kaart',
        backgroundColor: '#7E007F',
    }),
},
iCardPage: {
    screen: IndividualCardPage,
    navigationOptions: ({ navigation }) => ({
        title: 'Individuele kaart',

    }),
},
},{
    initialRouteName: 'Cards'
});

Затем мне также пришлось запустить событие навигации моего стекавигаторапри нажатии на одну из вкладок в моем BottomTabNavigator, например, так:

const AppNavigator = createMaterialBottomTabNavigator({

Home: {
    screen: Deck,
    navigationOptions: ({ navigation }) => ({
        title: 'Deck',
        tabBarIcon: ({ tintColor }) => (<MaterialIcons name='home' size={25} color={tintColor} />)
    })
},
Card: {
    screen: StackNavigator,
    navigationOptions: ({ navigation }) => ({
        title: 'Cards',
        tabBarIcon: ({ tintColor }) => (<MaterialIcons name='style' size={25} color={tintColor} />)
    })
}
},{
initialRouteName: 'Home',
barStyle: {
    backgroundColor: '#7E007F',
},
});

На странице, на которую я хотел отправить переменную, мне пришлось настроить код для получения переменной ('parameter'), примерно так:

 state = {
  name: "empy"
};


async componentDidMount() {
    this.setState((prevstate) => {
        name: this.props.navigation.getParam("name","empty")
    });
    console.log(this.values.name);
}