使用React Native中的动画隐藏和显示视图v0.46。

Question

朋友，

我有问题隐藏和显示反应原生视图。我已经做了下面的代码。想用动画隐藏和显示视图。请帮帮我。

代码：

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); 

欲解决方案V 0.46在反应机。

谢谢。

Answer 1

你离这里不远。

首先 - 您的ShowView函数不会呈现（this.ShowView()），因此返回的JSX将永远不会显示。这很好，你可以完全删除返回的代码，并仍然达到你想要的结果。

其次，您需要使ShowView成为一种类方法，以便了解组件的状态。只需将ShowView() {更改为ShowView =() => {即可解决此问题。你可以在这里了解一下https://www.ian-thomas.net/autobinding-react-and-es6-classes/

我注意到的另一件事是你如何直接改变状态对象而不用setState，这是一个很大的React no-no。应该不惜一切代价避免this.state.isModalVisible = true，使用提供的this.setState函数来更改状态。

最后，您的渲染功能可能会被重写。我已经放在一起的一个小例子小吃你在这里审查：https://snack.expo.io/SkKrb7prZ它完成动画模式超过主视图。

希望这会有所帮助！