Question

我对React-Native比较陌生。

我试图实现onTouch事件，但由于某种原因，这似乎不起作用。

例如此代码中的

    <View style={[container1,this.state.increased ? {backgroundColor: "#B4EEB4"} : null,this.state.decreased ? {backgroundColor: "#ffe5e5"} : null]} onPress={() => this.touched(this.props.key)}>
                    <View style={upperRow}>
                    <Text style={sno}> {this.props.no} </Text>
                    <Image 
                        source={{uri: "https://coincap.io/images/coins/" + this.props.coinName + ".png"}}
                        style={img}
                        /> 
                        <Text style={coinSymbol}>{this.props.coinShortName}</Text>
                        <Text style={coinPrice}>${this.props.coinPrice}</Text>
                        <View style={percentageBox}>
                        <Text style={this.props.percentChange < 0 ? percentChangeMinus : percentChangePlus }>{this.props.percentChange}%</Text>
                        </View>
                        </View>

                <Display enable={stateToDisplay}>
                    <View style={statisticsContainer}>
                              <Text style={marketCap}>Cap: {this.props.marketCap}B </Text>
                             <Text style={seperator1}>|</Text>
                             <Text style={vwapData}>24vwap: {this.props.vwapData} </Text>
                    </View>
                </Display> 

             </View>

这里

View style={[container1,this.state.increased ? {backgroundColor: "#B4EEB4"} : null,this.state.decreased ? {backgroundColor: "#ffe5e5"} : null]} onPress={() => this.touched(this.props.key)}>

我正在传递此onPress事件

onPress={() => this.touched(this.props.key)

我希望它应该已经调用/运行了此处涉及的功能

lass CoinCard扩展了组件{

state = {
    increased: false,
    decreased: false,
    selectedPostId: "none"
}



componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {
          this.setState({decreased: true, increased: false})
       }

       if (this.props.coinPrice < nextProps.coinPrice) {
        this.setState({increased: true, decreased: false})
       }
    }
}

touched = (id) => {
    this.setState({selectedPostId: id})
    console.log("inside touched")
}

[问题] ，但现在单击容器无济于事。有人可以告诉我我在做什么错吗？

Answer 1

View组件不提供onPress道具。您可以使用TouchableHighlight或TouchableOpacity。

Answer 2

因此，尽管在React Native View中没有onPress道具，但它确实具有onTouchStart，onTouchEnd事件。但是，即使您触摸视图内部的子级，也将调用此方法，因此，如果您希望仅将触摸内容仅包含在视图中内容之外的容器中，则不是一个好方法。

因此，您既可以使用onTouchStart并在那里处理onPress逻辑，也可以将整个视图包装在TouchableOpacity，TouchableHighlight或TouchableWithoutFeedback中并在其上处理onPress。

onTouch事件不起作用

2 个答案: