Closed
Description
Hi everybody,
I am trying to make a profile page. So first the user should log in to his account. If he logged in successfully, he passes to tab page. From there he can navigate to profile page. I have already done the login, registration and tab page with help of mysql and phpmyadmin. Both pages work fine. Also I use webhost. On the profile page I want to render the username which I typed on login page. I tried to code something. It works with console.log in Tabs.js but it doesn't work in Profile.js. What would be a correct way to do it as I want it? P.S I am quite new in React Native.
Login.js
fetch('https://lifestormweb.000webhostapp.com/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: UserEmail,
password: UserPassword,
name: UserName
})
}).then((response) => response.json())
.then((responseJson) => {
if(responseJson === 'Data Matched')
{
this.props.navigation.navigate("Tabs", { Name: UserName });
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.loginTextCont}>
<Text style={{fontSize: 36, fontFamily: "Futura" }}>
Willkommen zu</Text> <Text style={{fontSize: 36, fontFamily: "Futura", color:'#ff0000' }}>LifeStorm!</Text>
<View style={{width: 10, height: 5 }} />
</View>
<TextInput style={styles.inputBox}
onChangeText={UserName => this.setState({UserName})}
underlineColorAndroid='#ffffff'
placeholder="Ihre Name"
placeholderTextColor = "#ffffff"
selectionColor="#ffffff"
keyboardType="email-address"
onSubmitEditing={()=> this.password.focus()}
/>
<TextInput style={styles.inputBox}
onChangeText={UserEmail => this.setState({UserEmail})}
underlineColorAndroid='#ffffff'
placeholder="Ihre E-mail"
placeholderTextColor = "#ffffff"
selectionColor="#ffffff"
keyboardType="email-address"
onSubmitEditing={()=> this.password.focus()}
/>
<TextInput style={styles.inputBox}
onChangeText={UserPassword => this.setState({UserPassword})}
underlineColorAndroid='#ffffff'
placeholder="Passwort"
secureTextEntry={true}
placeholderTextColor = "#ffffff"
ref={(input) => this.password = input}
/>
<TouchableOpacity
style={styles.button}
onPress={this.UserLoginFunction}
>
<Text style={styles.buttonText}>Sich einloggen</Text>
</TouchableOpacity>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>
Haben Sie kein Konto?
</Text>
<TouchableOpacity onPress={()=>this.props.navigation.navigate("Register")}> <Text style={styles.signupButton}> Sich anmelden</Text></TouchableOpacity>
</View>
</View>
);
}
Tabs.js
import React, { Component } from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import { navigation } from 'react-navigation';
import Page1 from '../screens/Page1';
import Page2 from '../screens/Page2';
import Page3 from '../screens/Page3';
import Profile from '../screens/Profile';
import Page4 from '../screens/Page4';
export default class DetailsScreen extends React.Component {
static navigationOptions = {
header: null,
};
render() {
const { navigation } = this.props;
const Name1 = navigation.getParam('Name', 'UserName');
console.log(Name1);
return (
<Tabnav />
);
}
}
const Tabnav = createBottomTabNavigator({
Profil: {screen:Profile,},
Page1: {screen:Page1,},
Page2: {screen:Page2,},
Page3: {screen:Page3,},
Page4: {screen:Page4,}
});
Profile.js
import React, { Component } from 'react';
import { Text, View, AsyncStorage } from 'react-native';
import { navigation } from 'react-navigation';
import { Header } from "react-native-elements";
import { Name1 } from '../screens/Tabs';
export default class Profil extends React.Component {
render() {
return (
<View>
<Header
centerComponent={{ text: 'Profil', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
outerContainerStyles={{ backgroundColor: '#ffffff' }}
/>
<Text>Willkommen { Name1 } </Text>
</View>
);
}