react-native ios 模拟器触摸不工作

Question

我正在尝试编写我的第一个 React 本机应用程序。我似乎无法让 "TouchableHighlight" 工作。我想我已经正确包装了文本，但在 IOS 模拟器中没有任何反应。代码编译正确并且模拟器启动，但是无论我点击启动文本多少次都没有任何反应。

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


var StopWatch = React.createClass({
  render: function(){
    return <View style={styles.container}>
    <View style={[styles.header, this.border('yellow')]}>
    <View style={[styles.timerWrapper , this.border('red')]}>
    <Text>
      00:00:00
    </Text>
    </View>
    <View style={[styles.buttonWrapper , this.border('green')]}>
    {this.startStopButton()}
    {this.lapButton()}
    </View>
    </View>
      <View style={[styles.footer, this.border('blue')]}>
      <Text>
      I am a list of Laps
      </Text>
      </View>

 </View>
  },

  startStopButton: function () {
    return <TouchableHighlight underlayColor="gray" onPRess={this.handleStartPress}>
      <Text>
      Start
      </Text>
    </TouchableHighlight>
  },

  lapButton: function () {
    return <View>
      <Text>
      Lap
      </Text>
    </View>
  },
    handleStartPress: function() {
        console.log('Start was pressed');
    },
    border: function (color) {
        return {
            borderColor: color,
            borderWidth: 4
        }

    }
});

var styles = StyleSheet.create({
    container:{
        flex: 1,
        alignItems: 'stretch'
    },
    header: {
        flex: 1
    },
    footer: {
        flex: 1
    },
    timerWrapper: {
        flex: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonWrapper: {
        flex: 3,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center'

    }

});


AppRegistry.registerComponent('stopwatch', () => StopWatch);

Answer 1

试试这个。

onPress

中的拼写错误

startStopButton: function () {
    return <TouchableHighlight underlayColor="gray" onPress={this.handleStartPress}>
      <Text>
      Start
      </Text>
    </TouchableHighlight>
  },

react-native ios 模拟器触摸不工作

react-native ios simulator touch not working

ios

ios-simulator

react-native