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函数来改变状态。

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

希望这有帮助！

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

1 个答案: