Передать переменную в 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.info(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
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
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.info(this.values.name);
}

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