Question

基本上，我需要从登录名传递一个名为tempRole的参数到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

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

将分配给一个屏幕的变量传递给另一个屏幕

1 个答案: