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

Я хочу передать переменную с одной страницы через мой 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. Отображается сообщение об ошибке «невозможно найти переменную: имя». Есть идеи? заранее спасибо

Является ли values переменной класса? В этом случае переменная name, к которой вы пытаетесь получить доступ в реквизите navigation, вероятно, недоступна во время инициализации компонента. Пробовали ли вы перенести задание this.props.navigation... на componentDidMount?

Marcel Kalveram 22.05.2019 14:45

Не могли бы вы попробовать это? this.state = { name: this.props.navigation.state.params.name}

hong developer 23.05.2019 02:45

Спасибо вам обоим за помощь и подсказки! Я признателен за это!

geertjanknapen 27.05.2019 16:34
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
3
1 131
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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',
},
});

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

 state = {
  name: "empy"
};


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

Другие вопросы по теме