gpt4 book ai didi

react-native - React Native - 为什么 Touchable Highlight 会自动按下?

转载 作者:行者123 更新时间:2023-12-05 03:11:20 27 4
gpt4 key购买 nike

当我运行应用程序时,会自动调用 TouchableHighlight onPress 事件。此外,按钮不会改变 onPress 事件的颜色。这是代码,

    import React, { Component } from 'react';
import formatTime from 'minutes-seconds-milliseconds';

import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';

class Stopwatch extends Component {

constructor(props) {
super(props);
this.state = {
timerRunning: true,
timeDisplayed: null,
}
}

_onPressStart() {
console.log('start button')
/*setInterval(function(){ alert("Hello Start"); }, 3000);*/
}

_onPressLap() {
console.log('lap button')
/*setInterval(function(){ alert("Hello Lap"); }, 3000);*/
}

render() {
return (
<View style={styles.overallContainer}>
<View style={styles.upperContainer}>
<View style={styles.timeCover}>
<Text style={styles.timeWrapper}>
{formatTime(this.state.timeDisplayed)}
</Text>
</View>
<View style={styles.buttonCover}>
<TouchableHighlight style={styles.button} onPress = {this._onPressStart()}>
<Text>Start</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress = {this._onPressLap()}>
<Text>Lap</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.lapCover}>
<Text>
List of laps
</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

overallContainer: {
flex: 1,
},

upperContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
borderWidth: 4,
borderColor: 'yellow',
},
timeWrapper: {
fontSize: 50,
},
startWrapper: {
fontSize: 20,
},
lapWrapper: {
fontSize: 20,
},
timeCover: {
flex:5,
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
borderColor: 'red',
},
buttonCover: {
flex:3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
borderWidth: 2,
borderColor: 'green',
},
lapCover: {
flex:1,
borderWidth: 4,
borderColor: 'blue',
},
button: {
borderRadius: 50,
borderWidth: 2,
height:100,
width:100,
justifyContent: 'center',
alignItems: 'center'
}
});

AppRegistry.registerComponent('Stopwatch', () => Stopwatch);

When I execute the application in iphone simulator, it displays "import React, { Component } from 'react';
import formatTime from 'minutes-seconds-milliseconds';

import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';

class Stopwatch extends Component {

constructor(props) {
super(props);
this.state = {
timerRunning: true,
timeDisplayed: null,
}
}

_onPressStart() {
console.log('start button')
/*setInterval(function(){ alert("Hello Start"); }, 3000);*/
}

_onPressLap() {
console.log('lap button')
/*setInterval(function(){ alert("Hello Lap"); }, 3000);*/
}

render() {
return (
<View style={styles.overallContainer}>
<View style={styles.upperContainer}>
<View style={styles.timeCover}>
<Text style={styles.timeWrapper}>
{formatTime(this.state.timeDisplayed)}
</Text>
</View>
<View style={styles.buttonCover}>
<TouchableHighlight style={styles.button} onPress = {this._onPressStart()}>
<Text>Start</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress = {this._onPressLap()}>
<Text>Lap</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.lapCover}>
<Text>
List of laps
</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

overallContainer: {
flex: 1,
},

upperContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
borderWidth: 4,
borderColor: 'yellow',
},
timeWrapper: {
fontSize: 50,
},
startWrapper: {
fontSize: 20,
},
lapWrapper: {
fontSize: 20,
},
timeCover: {
flex:5,
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
borderColor: 'red',
},
buttonCover: {
flex:3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
borderWidth: 2,
borderColor: 'green',
},
lapCover: {
flex:1,
borderWidth: 4,
borderColor: 'blue',
},
button: {
borderRadius: 50,
borderWidth: 2,
height:100,
width:100,
justifyContent: 'center',
alignItems: 'center'
}

});

AppRegistry.registerComponent('Stopwatch', () => Stopwatch);

当我在 iphone 模拟器中运行应用程序时,调试器甚至在按下按钮之前就显示“开始按钮”和“膝上按钮”。

最佳答案

我错了,我应该写的,

onPress = {this._onPressStart}

而不是,

onPress = {this._onPressStart()}

关于react-native - React Native - 为什么 Touchable Highlight 会自动按下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37245174/

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