react-native - 将从一个屏幕分配的变量传递到另一个屏幕

Question

基本上我需要将一个名为 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 ([e-mail])</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

标签： react-nativeroles

Answer 1

使用全局函数传递值。

当您需要将数据传递到不是父子关系的屏幕时，全局函数很有用。

全局功能画面：

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