Question

当我运行应用程序时，会自动调用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模拟器中运行应用程序时，调试器显示＆＃34;启动按钮＆＃34;和＃34; lap buttin＆＃34;甚至在按下按钮之前。

Answer 1

我弄错了，我应该写，

onPress = {this._onPressStart}

代替，

onPress = {this._onPressStart()}

Answer 2

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

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

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

2 个答案: