Masquer et afficher la vue avec animation dans React Native v0.46.

Question

Amis,

J'ai un problème pour masquer et afficher la vue en mode natif. J'ai fais le code suivant. Vous voulez cacher et montrer la vue avec animation. Aidez-moi, s'il vous plaît.

code:

import React, { Component } from "react"; 
import { 
    AppRegistry, 
    Image, 
    View, 
    Text, 
    Button, 
    StyleSheet, 
    TouchableHighlight, 
} from "react-native"; 
import { StackNavigator } from "react-navigation"; 
import SignUpScreen from "./SignUp"; 
import AddManagerScreen from "./AddManager"; 

class SplashScreen extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isModalVisible : true, 
     } 
    } 


    static navigationOptions = { 
     title: 'DashBoard', 
    }; 

    ShowView(){ 
     this.state.isModalVisible = true; 
     console.log(this.state.isModalVisible); 

     if (this.state.isModalVisible) { 
     return(
      <View style={styles.container}> 
      <View style = {[styles.overlayView , {display : 'flex'}]}> 
      </View> 
      </View> 

     ); 

     }else{ 
     return null; 
     } 


     //this.refs.secondView.getDOMNode().style.display="none"; 
    } 

    render() { 
    console.log(this.state.isModalVisible); 

    console.disableYellowBox = true; 
    const { navigate } = this.props.navigation; 

     if (this.state.isModalVisible) { 
     return (
      <View style={styles.container}> 
      <Image style={{width: '100%', height: '100%'}} 
        source={require("./Images/background.png")} /> 

      <View style={styles.viewStyle}> 

      <TouchableHighlight style = {styles.buttonStart} 
       onPress={() => navigate("SignUp")}> 
        <Image 
        source={require('./Images/hire.png')} 
        /> 
      </TouchableHighlight> 

      <TouchableHighlight style = {styles.buttonEnd} 
       onPress={() => this.ShowView()}> 
        <Image style = {{marginBottom : 0}} 
        source={require('./Images/call.png')} 
        /> 
      </TouchableHighlight> 
      </View> 
      </View> 
     ); 
     }else{ 
     return(
      <View style={styles.container}> 
      <View style = {[styles.overlayView , {display : 'flex'}]}> 
      </View> 
      </View> 

     ); 
     } 

    } 
} 
const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: "#FFFFFF", 
    flex: 1, 
    flexDirection: "column", 
    alignItems: "center", 
    justifyContent: "center", 

    } , 
    viewStyle :{ 
    width: '100%', 
    height : '46%', 
    position : 'absolute', 
    backgroundColor : 'red', 
    alignItems: "flex-start", 
    justifyContent: "flex-start", 

    }, 
    buttonStart :{ 
    width: '100%', 
    height : '60%', 
    alignItems: "flex-start", 
    justifyContent: "flex-start", 

    }, 
    buttonEnd :{ 
    width: '100%', 
    height : '40%', 
    alignItems: "flex-end", 
    justifyContent: "flex-end", 

    }, 
    overlayView :{ 
    width: '100%', 
    height : '100%', 
    position : 'absolute', 
    backgroundColor : 'red', 
    } 
}); 

const Apple = StackNavigator(
    { 
    Splash: { screen: SplashScreen }, 
    SignUp: { screen: SignUpScreen }, 
    AddManager : { screen : AddManagerScreen}, 
    }, 
    { 
    headerMode: 'Splash' , 
    // initialRouteName: "Splash" , 
    } 
); 

AppRegistry.registerComponent("Apple",() => Apple); 

I Wanna solution V 0,46 en réaction native.

Merci.

Answer 1

vous n'êtes pas trop loin ici. Tout d'abord, votre fonction ShowView n'est pas rendue (this.ShowView()) de sorte que le JSX renvoyé n'apparaîtra jamais. C'est très bien, et vous pouvez supprimer entièrement ce code retourné et encore atteindre le résultat souhaité. Deuxièmement, vous devez définir la méthode de classe ShowView afin qu'elle connaisse l'état du composant. Il suffit de changer ShowView() { pour ShowView =() => { devrait résoudre ce problème pour vous. Vous pouvez lire un peu à ce sujet ici https://www.ian-thomas.net/autobinding-react-and-es6-classes/

Une autre chose que j'ai remarquée est comment vous changez directement l'objet d'état sans setState, qui est un grand non-Réagir. this.state.isModalVisible = true doit être évitée à tout prix, utilisez la fonction this.setState pour modifier l'état.

Enfin, votre fonction de rendu pourrait être retravaillée. J'ai mis en place un plus petit exemple Snack pour que vous puissiez le lire ici: https://snack.expo.io/SkKrb7prZ qui accomplit l'animation d'un modal sur la vue principale.

Espérons que cela aide!