gpt4 book ai didi

react-native - 在 React Native v0.46 中使用动画隐藏和显示 View 。

转载 作者:行者123 更新时间:2023-12-02 09:17:54 27 4
gpt4 key购买 nike

friend ,

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

代码:

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。

谢谢。

最佳答案

你离这里不远。

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

其次,您需要使 ShowView 成为类方法,以便它了解码件的状态。只需将 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 - 在 React Native v0.46 中使用动画隐藏和显示 View 。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45180903/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com