时间戳

首页 > 解决方案 > 在 bottomTabNavigator 中传递变量

react-native - 在 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”并能够在那里使用变量“名称”。会发生以下两种情况之一： 1. 单击按钮时没有任何反应。2. 错误消息显示“无法找到变量：名称”。有任何想法吗？提前致谢

标签： react-nativereact-navigation

解决方案

对于导航 onPress 我必须使用以下代码：

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

我还必须创建一个 stacknavigator：

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 中的一个选项卡时，我还必须触发我的 stacknavigator 的导航事件，如下所示：

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

推荐阅读