Передача переменных, назначенных с одного экрана на другой - PullRequest
Новая
       26

Передача переменных, назначенных с одного экрана на другой

0 голосов
/ 27 июня 2019

В основном мне нужно передать параметр с именем tempRole из Login в MainTabNavigator и создать вкладки в соответствии с ролью пользователя.Например, вендор имеет 4 вкладки, а остальные только 3 вкладки.Тем не менее, я не могу передать эту роль.

От входа в систему 

import React from 'react';
import { Text, View, StyleSheet, Platform, TextInput, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
import { Container, Form, Item, Label, Input, Button } from "native-base";
import * as FirebaseAPI from '../modules/firebaseAPI';

import MainTabNavigator from '../navigation/MainTabNavigator';
import bottomTabNavigator from '../navigation/MainTabNavigator';

export default class LoginScreen extends React.Component {
    constructor(props) {
        super(props);
    }

    static navigationOptions = {
        title: 'Login',
    };

    state = {
        LoginEmail: "",
        LoginPassword: "",
    };

    componentDidMount() {
        this.watchAuthState(this.props.navigation)
        try {
            window = undefined;
        } catch (e) {

        }
    }

    watchAuthState(navigation) {
        firebase.auth().onAuthStateChanged(function(user) {
            console.log('onAuthStateChangedLOGIN: ', user)
            if (user) {

                // user.displayName will be like vendor.Peter
                // e.g. role.name
                var tempName = user.displayName;
                navigation.navigate('Main', {
                    userRole: tempName.substr(0,tempName.indexOf('.'))
                });
            }
        });
    }

    signIn(LoginEmail, LoginPassword) {
        FirebaseAPI.signInUser(LoginEmail, LoginPassword);
    }

    render() {
        return (
            <Container style={styles.container}>
                <Form>
                    <Text style={styles.text}>Login</Text>

                    <Item style={styles.standardDefaultInput} floatingLabel>
                        <Label style={{textAlign: 'center'}}>Email (example@example.com)</Label>
                        <Input
                        autoCapitalize="none"
                        style={{textAlign: 'center'}}
                        autoCorrect={false}
                        onChangeText={(text) => this.setState({LoginEmail: text})}
                        value={this.state.LoginEmail}
                        />
                    </Item>

                    <Item style={styles.standardDefaultInput} floatingLabel>
                        <Label style={{textAlign: 'center'}}>Password (min. 6 charatcers)</Label>
                        <Input
                        autoCapitalize="none"
                        style={{textAlign: 'center'}}
                        autoCorrect={false}
                        onChangeText={(text) => this.setState({LoginPassword: text})}
                        value={this.state.Password}
                        />
                    </Item>

                    <Button style={styles.standardDefaultButton} onPress={() => this.setState(this.signIn(this.state.LoginEmail, this.state.LoginPassword))} full rounded success>
                        <Text>Log In</Text>
                    </Button>

                    <Button style={styles.standardDefaultButton} onPress={() => this.props.navigation.navigate('SignUp')} full rounded link>
                        <Text>Sign Up</Text>
                    </Button>                   

                </Form>
            </Container>
        );
    };
}

Обратите внимание, что навигация к Main - это TabNavigator

От MainTabNavigator 

let bottomTabNavigator = null
//let user = navigation.getParam(user)
//let userRole = user.displayName.substr(0,user.displayName.indexOf('.'))
//const { navigation } = this.props;

// The above failed

let userRole = navigation.getParam('userRole');

if (userRole == "vendor") {
    bottomTabNavigator = createBottomTabNavigator({
       HomeStack,
       ListingStack,
       CalendarStack,
       ProfileStack
    });
} else {
    bottomTabNavigator = createBottomTabNavigator({
       HomeStack,
       CalendarStack,
       ProfileStack
    });
}
export default bottomTabNavigator

1 Ответ

0 голосов
/ 27 июня 2019

Используйте глобальную функцию , чтобы передать значение .

Глобальные функции полезны, когда вам нужно передать данные на экран, который не является связью между родителями и детьми.

Экран глобальной функции: 

let NICKNAME = "";

function setNickName(data) {
  NICKNAME = data;
}

function getNickName() {
  return NICKNAME;
}

export {setNickName,getNickName }

Экран отправки данных: 

import {setNickName} from "GlobalFunctionScreen"
...
this.state={
    data: "sendData"
}
...
componentDidMount(){
    setNickName(this.state.data);
}

Экран получения данных: 

import {getNickName} from "GlobalFunctionScreen"
...
componentDidMount(){
   data =  getNickName();
   alert(data);
}
...