簡體   English   中英

react-native ios模擬器觸摸不起作用

[英]react-native ios simulator touch not working

我正在嘗試編寫我的第一個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);

嘗試這個。

onPress錯字錯誤

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM