Hide and Show View With Animation in React Native v0.46.

问题

Friends,

I have issue to hide and show view in react native. I have do the folloing code. Want to hide and show view with animation. Please help me.

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 Want to solution V 0.46 in react native.

Thanks.

回答1:

you're not too far off here.

First off - your ShowView function isn't rendered (this.ShowView()) anywhere so the returned JSX will never show up. This is fine, and you can remove that returned code entirely and still achieve your desired result.

Second, you need to make the ShowView a class method so it is aware of the component's state. Simply changing ShowView() { to ShowView = () => { should solve this for you. You can read a bit about this here https://www.ian-thomas.net/autobinding-react-and-es6-classes/

Another thing I noticed is how you directly change the state object without setState, which is a big React no-no. this.state.isModalVisible = true should be avoided at all costs, use the provided this.setState function to alter state.

Lastly, your render function could be reworked. I've put together a smaller example Snack for you to review here: https://snack.expo.io/SkKrb7prZ which accomplishes animating a modal overtop the main view.

Hope this helps!

来源：https://stackoverflow.com/questions/45180903/hide-and-show-view-with-animation-in-react-native-v0-46