how do I arrow the data on another screen from the return of the post

Asked

Viewed 87 times

0

How do I arrow the data on another screen from the return of the POST

import React from  'react'
import  {
    Text ,
    View , 
    TextInput,
    KeyboardAvoidingView,
    TouchableOpacity,
    AsyncStorage,
} from  'react-native' 
import { 
    Container, 
    Header, 
    Content, 
    Button, 
    Text as Texto, 
    Left, 
    Right, 
    Icon, 
    Body, 
    Title
} from 'native-base';
import { StyleSheet } from 'react-native'


export default class Tela1 extends React.Component {

    constructor ( props){
        super  ( props);
        this.state = {
            username : '',
            passaword :  ' ',
        }
    } 

    ComponentDidMount  (){
        this._loadInitialState().done();
    }

    _loadInitialState =  async () =>  {

        var value    =  await  AsyncStorage.getItem ('user');

        if  ( value  !==  null){
            this.props.navigation.navigate  ("Tela2");
        }
    }

    render  ( ){
        return  (
            <KeyboardAvoidingView  behavior = 'padding' style =  { styles.wrapper}>

                <Header  style = {{ backgroundColor : '#008B8B'}}>
                    <Left></Left>
                    <Body>
                        <Title> </Title>
                    </Body>
                    <Right></Right>
                </Header>

                <View  style =  {styles.container}>
                    <Text  style = {styles.header}> Ftopfit </Text>
                    <TextInput style =  {  styles.textInput}  
                      placeholder = 'username' 
                      onChangeText =  { (username)  => this.setState  ({username})} 
                      underlinecolorAndroid = 'transparent' /> 

                    <TextInput style =  {  styles.textInput} 
                      placeholder = 'passaword'
                      onChangeText =  { (passaword)  => this.setState  ({passaword})}
                      secureTextEntry ={true}  
                      underlinecolorAndroid = 'transparent' /> 

                    <TouchableOpacity  style  = {  styles.btn} 
                      onPress = { this.login}>
                        <Text > Login </Text>
                    </TouchableOpacity>

                </View>
            </KeyboardAvoidingView>
        );
    }

    login  = ( )  =>  { 

        fetch('http://192.168.1.108:3000/users', {
            method : 'POST',
            headers : {
                'Accept' :  'application/json',
                'Content-Type' : 'application/json'
            },
            body :  JSON.stringify ({
                username  : this. state.username,
                passaword  : this.state.passaword
            })
        })
       .then (( response)  =>response.json())
       .then ((res ) => {

            if  (res.success === true ){
                AsyncStorage.setItem ('user',res.user);
                this.props.navigation.navigate ("Tela2" , item);
            }
            else {
                alert ( res.messege);
            }
        })
        .done();
    }
}

1 answer

0

Stop a route by placing them on an object as a second parameter for the navigation function.navigate: this.props.navigation.navigate ('Routename', {/ * params go here * /})

Read the parameters in your screen component: this.props.navigation.getParam (paramName, defaultValue)

const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');

https://reactnavigation.org/docs/en/params.html

Browser other questions tagged

You are not signed in. Login or sign up in order to post.