在React Native中如何从启动屏幕导航到登录屏幕? [英] How to navigate from splash screen to login screen in react native?
问题描述
我是新手，对本地人有反应.我正在开发一个示例应用程序，在该应用程序中，用户在打开应用程序时将看到启动屏幕，随后他将获得登录屏幕.但是我不知道从初始屏幕导航到登录屏幕的方法.
下面是代码段，
I am a newbie to react native. I'm developing a sample app where user will get splash screen on opening of the app and later he will get login screen. But I am unable to figure out the way to navigate from splash screen to login screen.
Below are the code snippets,
启动画面的app.js文件-
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Image, TouchableOpacity, Alert } from 'react-native';
export default class Myapp extends Component<{}>
{
constructor(){
super();
this.state={
isVisible : true,
}
}
Hide_Splash_Screen=()=>{
this.setState({
isVisible : false
});
}
componentDidMount(){
var that = this;
setTimeout(function(){
that.Hide_Splash_Screen();
}, 5000);
}
render()
{
let Splash_Screen = (
<View style={styles.SplashScreen_RootView}>
<View style={styles.SplashScreen_ChildView}>
{/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}
<Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}}
style={{width:'100%', height: '100%', resizeMode: 'contain'}} />
</View>
<TouchableOpacity
activeOpacity = { 0.5 }
style={styles.TouchableOpacity_Style}
onPress={this.Hide_Splash_Screen} >
<Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
style={{width:25, height: 25}} />
</TouchableOpacity>
</View> )
return(
<View style = { styles.MainContainer }>
<Text style={{textAlign: 'center'}}> Hello Guys </Text>
{
(this.state.isVisible === true) ? Splash_Screen : null
}
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
},
SplashScreen_RootView:
{
justifyContent: 'center',
flex:1,
margin: 10,
position: 'absolute',
width: '100%',
height: '100%',
},
SplashScreen_ChildView:
{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#00BCD4',
flex:1,
margin: 20,
},
TouchableOpacity_Style:{
width:25,
height: 25,
top:9,
right:9,
position: 'absolute'
}
});
login.js代码段-
import React, { Component } from 'react';
import { StyleSheet, TextInput, View, Alert, Button, Text} from 'react-native';
// Importing Stack Navigator library to add multiple activities.
import { StackNavigator } from 'react-navigation';
// Creating Login Activity.
class LoginActivity extends Component {
// Setting up Login Activity title.
static navigationOptions =
{
title: 'LoginActivity',
};
constructor(props) {
super(props)
this.state = {
UserEmail: '',
UserPassword: ''
}
}
UserLoginFunction = () =>{
const { UserEmail } = this.state ;
const { UserPassword } = this.state ;
fetch('https://reactnativecode.000webhostapp.com/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: UserEmail,
password: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson === 'Data Matched')
{
//Then open Profile activity and send user email to profile activity.
this.props.navigation.navigate('Second', { Email: UserEmail });
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style= {styles.TextComponentStyle}>User Login Form</Text>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter User Email"
onChangeText={UserEmail => this.setState({UserEmail})}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter User Password"
onChangeText={UserPassword => this.setState({UserPassword})}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title="Click Here To Login" onPress={this.UserLoginFunction} color="#2196F3" />
</View>
);
}
}
// Creating Profile activity.
class ProfileActivity extends Component
{
// Setting up profile activity title.
static navigationOptions =
{
title: 'ProfileActivity',
};
render()
{
const {goBack} = this.props.navigation;
return(
<View style = { styles.MainContainer }>
<Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Email } </Text>
<Button title="Click here to Logout" onPress={ () => goBack(null) } />
</View>
);
}
}
export default MainProject = StackNavigator(
{
First: { screen: LoginActivity },
Second: { screen: ProfileActivity }
});
const styles = StyleSheet.create({
MainContainer :{
justifyContent: 'center',
flex:1,
margin: 10,
},
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: '#2196F3',
// Set border Radius.
borderRadius: 5 ,
},
TextComponentStyle: {
fontSize: 20,
color: "#000",
textAlign: 'center',
marginBottom: 15
}
});
现在如何在主文件中使用login.js文件夹，反之亦然?
Now How can I use the login.js folder in main file or vice versa?
推荐答案
我将为您提供示例应用程序的代码.仅包含三个屏幕，只需从代码中找出即可，如何正确地从一个屏幕导航到另一个屏幕. App.js包含stack-navigator.所有
其他屏幕已导入.首先研究堆栈导航器.
I will give you the code of a sample app.It contains just three screens just figure out from the code, How you can navigate correctly from one screen to another. The App.js contains the stack-navigator.To which all
the other screens are imported.Study about stack navigator first.
https://drive.google.com/open?id=1VdqBtawsx_Z0c3b7CUDv_d8lfcSlD> (以上是指向示例应用程序的google驱动器链接)
https://drive.google.com/open?id=1VdqBtawsx_Z0c3b7CUDv_d8lfcSlDvZo (above is a google drive link to sample app)
-
它包含三个屏幕
splashscreen,profilescreen,profiledetailscreen
它是react-native应用程序的最新版本，例如npm启动您之后
将必须分别启动仿真器，然后单击"a"启动
模拟器中的应用程序.
its a newest version of react-native app like after npm start you
will have to start a emulator separately then click 'a' to launch the
app inside the emulator.
或从名为 Expo 的应用中读取终端机内部生成的条形码，该条形码在npm start之后出现，以将其启动到设备中.
or read the bar code generated inside the terminal which appears after npm start from the app named Expo to launch it in the device.
这篇关于在React Native中如何从启动屏幕导航到登录屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
