react-native ios模拟器触摸不起作用答案

【问题标题】：react-native ios simulator touch not workingreact-native ios模拟器触摸不起作用
【发布时间】：2017-05-14 11:04:45
【问题描述】：

我正在尝试编写我的第一个反应原生应用程序。我似乎无法让“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);

【问题讨论】：

标签： ios react-native ios-simulator

【解决方案1】：

试试这个。

onPress 中的拼写错误

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

【讨论】：