Мое собственное приложение React возвращается к экрану spla sh всякий раз, когда я нажимаю кнопку с функцией навигации - PullRequest
Новая
       298

Мое собственное приложение React возвращается к экрану spla sh всякий раз, когда я нажимаю кнопку с функцией навигации

0 голосов
/ 07 августа 2020

Я создал экран spla sh, просто поместив изображение и функцию setInterval (), после этого интервала я добавил инструкцию для перехода к экрану входа в систему (navigation.navigate ('loginScreen') на экране входа в систему на кнопке (кнопка регистрации) я добавил fonPress () для перехода к экрану регистрации (navigation.navigate ('RegistrationScreen'). он работает, и приложение переходит на экран регистрации, но та же функция setinterval запускается снова, и экран автоматически переходит к страница входа снова. ///////////////////////// Приложение. js //////////////// ///////////////// 

import 'react-native-gesture-handler';
import React from 'react';
import  SplashScreen  from './app/screens/splash.screen';
import  LoginScreen  from './app/screens/login.screen';  
import  SignupScreen  from './app/screens/signup.screen';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  ImageBackground,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Header } from 'react-native/Libraries/NewAppScreen';

const Stack = createStackNavigator();




const App = () => {
  return (
    <NavigationContainer>

        <Stack.Navigator initialRouteName="SplashScreen" headerMode='none'  >
        
            <Stack.Screen name="SplashScreen" component={SplashScreen}  />
            <Stack.Screen name="LoginScreen" component={LoginScreen} />
            <Stack.Screen name="SignupScreen" component={SignupScreen}/>
        
        </Stack.Navigator>

    </NavigationContainer>
  );
};
const styles = StyleSheet.create({


});

export default App;

////////////////////// spla sh код экрана /////////////////// 

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image,
    ImageBackground,
    Button,
  } from 'react-native';





  function SplashScreen({ navigation }) {
      //method to give splash screen effect ,screen navigates to next screen after 9000 milliseconds
      
        setInterval(() => { navigation.navigate('LoginScreen')}, 9000);} 
    
     
    
    return (
        <View style={styles.bod} >
    
         <Text>{kaka}</Text>
        <Image source={require("../../Images/ss1.jpg")}  style={{flex:1,width:null, height: null}}/> 
        
       </View>
    );
  }



//   const SplashScreen = () => {
//     return (
//       <View style={styles.bod}>
      
      
//        <Image source={require("../../Images/ss1.jpg")}  style={{width: '100%', height: '100%'}}/> 
//   <Button 
//           title="Go to Details"
//           onPress={() => navigation.navigate('LoginScreen')}
//         />
//       </View>
//     );
//   };
  const styles = StyleSheet.create({
  
    bod : {
        flex:1,
    },
  
    img:{
    
    
    }
  
  });
  export default SplashScreen;

/////////// Код экрана входа в систему //// ////////////////// 

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image,
    ImageBackground,
    Button,
  } from 'react-native';
import { greaterThan } from 'react-native-reanimated';
import { TextInput } from 'react-native-gesture-handler';



  function LoginScreen({ navigation }) {
    return (
  
    <View style={styles.grandparent}>

            <View style={styles.welcom} >
                <Text style={{color:'white',fontSize:35,fontFamily: "sans-serif-thin"}}>Welcome to CAWN!</Text>
         
            </View>

            <View style={styles.logo}>
               <Image source={require("../../Images/logo2.png")}  style={{width:'100%',height:'100%'}}/>
            </View>

            <View style={styles.mainlogin}>
                    <View style={styles.loginChild1}>
                        <Text style={{color:'white',fontSize:28,fontFamily:"sans-serif",paddingTop:4,}}>Member Sign In!</Text>
                        {/* <Image source={require("../../Images/user.png")}  style={{width:'100%',height:'100%'}}/>  */}
                    </View>
                <View style={styles.fieldsMain}>
                    <View style={styles.userDiv}>
                        
                            <View style={{flex: 1.5,width: 100,height: 53}}>
                                 <Image source={require("../../Images/user.png")}  style={{width:'100%',height:'100%'}}/> 
                            </View>
                            <View style={{ flex: 5, width: 100,paddingLeft:4,}}>
                                <TextInput style={{ height: 48,backgroundColor:'white' }}></TextInput>
                            </View>

                    </View>
                    <View style={styles.psDiv}>

                            <View style={{flex: 1.5,width: 100,height: 53}}>
                                 <Image source={require("../../Images/password1.png")}  style={{width:'100%',height:'100%'}}/> 
                            </View>
                            <View style={{ flex: 5, width: 100,paddingLeft:4,}}>
                                <TextInput style={{ height: 48,backgroundColor:'white', }}></TextInput>
                            </View>

                    </View>
                    <View style={{flex:0.3,}}></View>
                </View>
                <View style={styles.loginLastRow}>
                    <View style={styles.loginLastRowChild1}>
                        <Button title="Log in" color="#31b9eb" onPress={() => Alert.alert('Simple Button pressed')} />
                    </View>
                    <View style={styles.loginLastRowChild2}>
                        <View style={{paddingBottom:4,}}>
                            <Text style={{color:'white',fontSize:25,fontFamily: "sans-serif-thin",}}>Not a Member yet?</Text>
                        </View>
                      
                          <Button title="Sign Up" color="#31b9eb" onPress={() =>  navigation.navigate('SignupScreen')} />
                        
                    </View>
                </View>
            </View>
        <View style={styles.lastSpace} />
      </View>
    
    );
  }




  const styles = StyleSheet.create({
  
    grandparent : {
        flex: 1,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'center',
        paddingHorizontal: 20,
        paddingBottom: 30,
        flexWrap: 'wrap',

        //added by MFU
        paddingTop:10,
        backgroundColor:'#c3c8ed',
        // borderWidth:1,
        // borderColor:'red',
    },
    welcom : {
        flex: 0.6,
        width: '100%',
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

         // added by mfu
        
        // borderWidth:1,
        // borderColor:'green',
    },
    logo : {
        flex: 1.9,
         width: 250,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

        // added by mfu
        paddingTop:6,

        // borderWidth:1,
        // borderColor:'blue',
    },
    mainlogin : {
        flex: 3.5,
        width: 300,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        alignContent: 'center',

        // borderWidth:3,
        // borderColor:'black',
    },
    loginChild1 : {
        flex: 0.4,
        width: '100%',
        height: 100,
        flexWrap: 'wrap',
        
        //added by MFU
        alignItems: 'center',
        alignContent: 'center',
        // borderWidth:1,
        // borderColor:'red',
    },
    fieldsMain : {
        flex: 1.2,
        width: '100%',
        height: 100,

        //added by mfu
        alignItems: 'center',   
        // borderWidth:1,
        // borderColor:'blue',
    },
    userDiv : {
        flex: 1,
        width: '80%',
        // height: '100%',
  //added by mfu
        // borderWidth:1,
        // borderColor:'green',
        flexDirection: 'row',
       
    },
    psDiv : {
        flex: 1,
        width: '80%',
        
        // height: 100,
//added by mfu
        // borderWidth:1,
        // borderColor:'pink',
        flexDirection: 'row',
      

    },
    loginLastRow : {
        flex: 1,
        width: '80%',
        height: 100,

           //added by mfu
        // borderWidth:1,
        // borderColor:'purple',
    },
    loginLastRowChild1 : {
        flex: 1,
        width: 100,
        height: 100,

        // borderWidth:1,
        // borderColor:'red',
    },
    loginLastRowChild2 : {
        flex: 1,
        width: '100%',
        height: 100,

        // borderWidth:1,
        // borderColor:'green',
        
    },
    lastSpace : {
        flex: 0.5,
        width: 250,
        height: 100,

        // borderWidth:1,
        // borderColor:'green',
    },
  });

  export default LoginScreen;

1 Ответ

0 голосов
/ 10 августа 2020

setInterval запускает код повторно с заданным интервалом. Я думаю, вам может понадобиться setTimeout (который будет запускаться только один раз)

...