buenos dias soy nuevo en react native y tengo 2 ventanas y entonces una es el login y la otra muestra una lista de objetos entonce quiero saber como hago para llevarme el nombre con el que hice sesion a la otra ventana y mostrarlo en un < Text >
VENTANA DE LOGIN --- /pages/loginView
import React from 'react';
import {StyleSheet,Text,Dimensions,View,TouchableOpacity,TextInput,Keyboard,Image,Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const {width, height} = Dimensions.get('window');
export default class loginView extends React.Component {
static navigationOptions= ({navigation}) =>({title: 'Login'});
constructor(props){
super(props)
this.state={userName:'', userPassword:'', }
}
login=()=>{
const {userName,userPassword} = this.state;
if(userName=="" || userPassword==""){this.setState({mensaje:'debe llenar los campos'})}
else{
fetch('http://www.yarascorp.com/reactnative/login.php',{
method:'post',
header:{'Accept':'application/json', 'Content-type':'application/json'},
body:JSON.stringify({name:userName, password:userPassword })
})
.then((response)=>response.json())
.then((responseJson)=>{
if(responseJson == "Correcto"){
this.setState({mensaje:'Inicio correcto'})
this.props.navigation.navigate("Profile");
}else{
this.setState({mensaje:'Error con el usuario o clave'})
}
})
.catch((error)=>{console.error(error);});
}
Keyboard.dismiss();
}
render() {
return (
<View style={styles.container}>
<View style={styles.contlogo}>
<View style={styles.hlogo}><Image style={styles.coverImage1} source={require('../imgs/costco.png')}/></View>
<View style={styles.hlogo}><Image style={styles.coverImage2} source={require('../imgs/logometalss.png')}/></View>
</View>
<View style={styles.cuerpo}>
<View style={styles.campos}>
<Icon style={styles.infoIcon} name="user" size={20} color="grey"/>
<TextInput
placeholder="Ingrese Usuario" style={styles.textInput} underlineColorAndroid="transparent"
onChangeText={userName => this.setState({userName})} value={this.state.userName}
/>
</View>
<View style={styles.campos}>
<Icon style={styles.infoIcon} name="key" size={20} color="grey"/>
<TextInput
secureTextEntry={true} placeholder="Ingrese Clave" style={styles.textInput}
underlineColorAndroid="transparent" onChangeText={userPassword => this.setState({userPassword})} value={this.state.text1}/>
</View>
<TouchableOpacity onPress={this.login}style={{width:250,padding:10,marginTop:20,backgroundColor:"#A30000",alignItems:'center'}}>
<Text style={{color:'white',fontWeight:'bold'}}>Entrar</Text>
</TouchableOpacity>
<Text style={styles.mensaje}>{this.state.mensaje}</Text>
</View>
</View>
);
}
}
VENTANA DE VISUALIZACION --- /pages/visorView
import React from 'react';
import {StyleSheet,Text,View,Button,Alert,ActivityIndicator,ListView,Platform,TouchableOpacity} from 'react-native';
import loginView from '../pages/loginView';
export default class visorView extends React.Component{
static navigationOptions=({navigation}) =>({header: null,});
static navigationOptions={tabBarLabel:'Visor'}
constructor(props){
super(props);
this.state={
isLoading: true,
}
}
GetItem (cliente,deservicios){
Alert.alert(cliente, deservicios);
}
componentDidMount(){
return fetch('http://www.yarascorp.com/reactnative/ordenesprcostco.php')
.then((response)=>response.json())
.then((responseJson)=>{
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
},function(){
// In this block you can do something with new state.
});
})
.catch((error)=>{
console.error(error);
});
}
ListViewItemSeparator=()=>{
return(
<View
style={{
height:.5,
width:"100%",
backgroundColor:"#000",
}}
/>
);
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return(
<View style={styles.container}>
<View style={styles.cabecera}>
<Text style={styles.titulo}>- Visor de pedidos -</Text>
</View>
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator={this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: 'column'}} >
<TouchableOpacity onPress={this.GetItem.bind(this,rowData.cliente,rowData.descripcion)} >
<Text style={styles.textViewContainer} autoCapitalize="characters">{rowData.cliente+' / '+rowData.direccion}</Text>
</TouchableOpacity>
</View>
}
/>
</View>
</View>
);
}
}