首页 文章

如何从启动画面导航到登录屏幕反应原生？

提问于
浏览 次
1

我是新手来做出反应 . 我正在开发一个示例应用程序，用户将在打开应用程序时获得启动画面，之后他将获得登录屏幕 . 但我无法弄清楚从启动画面导航到登录屏幕的方法 .
以下是代码片段，

Splash screen' app.js file -

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 snippet -

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文件夹，反之亦然？

android react-native

4 回答

  • 1

    我将给你一个示例应用程序的代码 . 它只包含三个屏幕，只是从代码中找出，如何从一个屏幕正确导航到另一个屏幕 . App.js 包含 stack-navigator .To，导入所有其他屏幕 . 首先研究堆栈导航器 .

    https://drive.google.com/open?id=1-_LJfsV7hqywrH8KYKHU0-RmMhDRf3sP（上面是示例应用的google驱动链接）

    • 它包含三个屏幕 splashscreen,profilescreen,profiledetailscreen

    • 它是 react-native app的最新版本，就像在 npm 开始之后你必须单独启动一个模拟器，然后单击'a'在模拟器中启动应用程序 .

    • 或从名为 Expo 的应用程序中读取 npm start 之后显示的终端内生成的条形码，以在设备中启动它 .

    回复于
  • 0

    为了使用您的应用程序从Splash屏幕导航到登录屏幕的用户，您需要使用 NavigatorIOS 组件（仅适用于iOS）或使用React Native的导航库 .

    热门导航库包括：

    使用我首选的 react-native-navigation 从Splash导航到登录屏幕的示例：

    this.props.navigation.push({
   screen: 'MyApp.LoginActivity'
});

    但是，为了使用上述内容，您首先必须安装 react-native-navigation ，然后注册每个屏幕 .

    上述每个库的文档都非常简单，绝对可以帮助您在屏幕之间导航 .

    This guide在官方文档中应该帮助你 .

    回复于
  • 1

    如果您正在使用EXPO Splash Screen已包含在内 . 你不需要为它添加任何代码 . 如果你想对它进行更改，你可以在 app.json 中进行更改 .

    "splash": {
      "image": "./App/Images/My_Splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#000000"
    },

    用于导航：React Navigation

    世博会：Expo Splash Screen

    回复于
  • 0

    你试过这个图书馆吗？ https://github.com/bamlab/generator-rn-toolbox它将为您的应用创建启动和应用图标 .

    回复于

相关问题