我正在尝试编写我的第一个反应原生应用程序。我似乎无法让“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);
答案 0 :(得分:1)
试试这个。
onPress
startStopButton: function () {
return <TouchableHighlight underlayColor="gray" onPress={this.handleStartPress}>
<Text>
Start
</Text>
</TouchableHighlight>
},