在 React Native v0.46 中隐藏和显示带有动画的视图. [英] Hide and Show View With Animation in React Native v0.46.
问题描述
朋友，
我无法在 React Native 中隐藏和显示视图.我已经做了以下代码.想要隐藏和显示带有动画的视图.请帮帮我.
I have issue to hide and show view in react native. I have do the folloing code. Want to hide and show view with animation. Please help me.
代码:
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.
I Want to solution V 0.46 in react native.
谢谢.
推荐答案
您离这里不远了.
首先 - 您的 ShowView 函数不会在任何地方呈现(this.ShowView())，因此返回的 JSX 永远不会出现.这很好，您可以完全删除返回的代码，仍然可以达到您想要的结果.
First off - your ShowView function isn't rendered (this.ShowView()) anywhere so the returned JSX will never show up. This is fine, and you can remove that returned code entirely and still achieve your desired result.
其次，您需要使 ShowView 成为一个类方法，以便它知道组件的状态.只需将 ShowView() { 更改为 ShowView = () =>{ 应该会为您解决这个问题.您可以在此处阅读一些相关内容 https://www.ian-thomas.net/autobinding-react-and-es6-classes/
Second, you need to make the ShowView a class method so it is aware of the component's state. Simply changing ShowView() { to ShowView = () => { should solve this for you. You can read a bit about this here https://www.ian-thomas.net/autobinding-react-and-es6-classes/
我注意到的另一件事是如何在没有 setState 的情况下直接更改状态对象，这是 React 的一大禁忌.this.state.isModalVisible = true 应该不惜一切代价避免，使用提供的 this.setState 函数来改变状态.
Another thing I noticed is how you directly change the state object without setState, which is a big React no-no. this.state.isModalVisible = true should be avoided at all costs, use the provided this.setState function to alter state.
最后，您的渲染功能可以重新设计.我整理了一个较小的示例 Snack 供您在此处查看:https://snack.expo.io/SkKrb7prZ 完成在主视图上方设置模态动画.
Lastly, your render function could be reworked. I've put together a smaller example Snack for you to review here: https://snack.expo.io/SkKrb7prZ which accomplishes animating a modal overtop the main view.
希望这会有所帮助！
这篇关于在 React Native v0.46 中隐藏和显示带有动画的视图.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
