反応ネイティブのiosシミュレータのタッチが動作しない

Question

私は最初の反応するネイティブアプリを書こうとしています。私は "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

これを試してください。 neatoh80ようこそ@

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