Скрыть и показать представление с анимацией в 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, который является большой реакцией нет-нет. this.state.isModalVisible = true следует избегать любой ценой, используйте предоставленные this.setState функция для изменения состояния.

Наконец, ваша функция рендеринга может быть переработана. Я собрал небольшой пример Snack, который вы можете просмотреть здесь: https://snack.expo.io/SkKrb7prZ который выполняет анимацию модального поверх основного вида.

Надеюсь это поможет!