react-native - 通过变量将数据导出到另一个屏幕

Question

预先感谢您的所有帮助。

我正在尝试构建应用程序的一部分，在成功登录时将用户传递到他们的个人资料页面，并根据从后端接收的 ID 变量加载他们的个人资料信息。我不知道该怎么做，就好像我尝试导出 tempId 它给了我一个错误一样，navigation.navigate 也是如此......

我真的很感激在这里向正确的方向点头。

import React, {Component, useState} from 'react';
import {
            StyleSheet,
            Text,
            View,
            KeyboardAvoidingView,
            TextInput,
            TouchableOpacity,
            AsyncStorage,
            Alert
            } from 'react-native';
import {Actions} from 'react-native-router-flux';
import api from '../services/api';
import axios from 'axios';



export default function Form ({}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');


        async function handleLogin(){
                const response = await axios({
                method: 'post', 
                url: 'http://apiboardgeek.co.uk/users/login',
                data: {email: email, password: password }
            });
        //console.log('HELLO')
        console.log(response.data)
        await AsyncStorage.setItem('accessToken', response.data.accessToken);
        const tempToken = await AsyncStorage.getItem('accessToken');
        await AsyncStorage.setItem('id', response.data.id);
        const tempId = await AsyncStorage.getItem('id');


        if(response.data.message=="User Logged in succesfully"){
            //alert('Login succesful');
            //navigation.navigate('Profile')
            Actions.UserProfile();
        }
        // else{
        // alert('Login failed, please try again');
        // return null;
        //  }

        //navigation.navigate('UserProfile');
        }

        return (
        <KeyboardAvoidingView style={styles.container} behavior = "padding" enabled>
            <View>
                <TextInput style={styles.inputBox} 
                underlineColorAndroid='rgba(0,0,0,0)' 
                placeholder="Email"
                placeholderTextColor = "#000000"
                selectionColor="#fcd9d9"
                keyboardType="email-address"
                value={email}
                onChangeText={setEmail}
                onSubmitEditing={() => this.password.focus}
                />
                <TextInput style={styles.inputBox} 
                underlineColorAndroid='rgba(0,0,0,0)' 
                placeholder="Password"
                secureTextEntry={true}
                placeholderTextColor = "#000000"
                selectionColor="#fcd9d9"
                value={password}
                onChangeText={setPassword}
                ref={(input) => this.password = input}
                />
                <TouchableOpacity style = {styles.button} onPress={handleLogin}>
                    <Text style = {styles.buttonText}>Sign In</Text>
                </TouchableOpacity>
            </View>
        </KeyboardAvoidingView>
        );

}

const styles = StyleSheet.create({


    container : {
        flexGrow: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    inputBox :{
        width: 300,
        backgroundColor: '#dedcdc',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize: 16,
        marginVertical: 10,
        paddingVertical: 12

    },

    button : {
        width: 300,
        backgroundColor: '#a19f9f',
        borderRadius: 25,
        marginVertical: 10,
        paddingVertical: 16,

    },

    buttonText : {
        fontSize: 16,
        fontWeight: '500',
        color: '#ffffff',
        textAlign: 'center',
    }


}); 

提前感谢大家，如果缺少某些信息，我们深表歉意。在这个阶段，头部即将爆炸，我无法思考......

标签： react-native

Answer 1

在另一个屏幕中使用 AsyncStorage 来访问数据很有帮助。

要访问“tempId”，我使用了上面的行：

        const tempId = await AsyncStorage.getItem('id');

就在我需要访问它的屏幕中。