Я хочу передать переменную с одной страницы через мой 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. Отображается сообщение об ошибке «невозможно найти переменную: имя». Есть идеи? заранее спасибо
Не могли бы вы попробовать это? this.state = { name: this.props.navigation.state.params.name}
Спасибо вам обоим за помощь и подсказки! Я признателен за это!
Для навигации по прессе мне пришлось использовать этот код:
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);
}
Является ли
values
переменной класса? В этом случае переменнаяname
, к которой вы пытаетесь получить доступ в реквизитеnavigation
, вероятно, недоступна во время инициализации компонента. Пробовали ли вы перенести заданиеthis.props.navigation...
наcomponentDidMount
?