React Native - 为什么 Touchable Highlight 会自动按下？答案

【问题标题】：React Native -Why does the Touchable Highlight press automatically?React Native - 为什么 Touchable Highlight 会自动按下？
【发布时间】：2023-03-10 15:22:01
【问题描述】：

当我运行应用程序时，会自动调用 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 模拟器中运行应用程序时，即使在按下按钮之前，调试器也会显示“开始按钮”和“圈按钮”。

【问题讨论】：

标签： react-native

【解决方案1】：

我弄错了，我应该写的，

onPress = {this._onPressStart}

而不是，

onPress = {this._onPressStart()}

【讨论】：

【解决方案2】：

这是因为您拥有this._onPressStart() 而不是this._onPressStart

this._onPressStart() 在编码到达时调用该函数，但您想在事件发生时运行它，因此您需要使用this._onPressStart

【讨论】：