使用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它完成動畫模式超過主視圖。

希望這會有所幫助！