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

Question

朋友，

我在 React Native 中隐藏和显示视图时遇到问题。我已经做了以下代码。想要用动画隐藏和显示视图。请帮助我。

代码：

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

我想在 React Native 中解决 V 0.46。

谢谢。

Answer 1

你离这里不远。

首先 - 您的 ShowView 函数不会在任何地方呈现 (this.ShowView())，因此返回的 JSX 永远不会出现。这很好，您可以完全删除返回的代码并仍然获得您想要的结果。

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

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

最后，您的渲染函数可以重新设计。我已经整理了一个较小的示例 Snack 供您在此处查看：https://snack.expo.io/SkKrb7prZ 它完成了在主视图之上设置模态动画。

希望对您有所帮助！

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

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

react-native

reactive-programming

react-native-0.46