Question

我试图创建一个类似于TouchableHighlight的组件，但不是突出显示背景，而是要突出显示文本。我需要挂钩在用户实际按下时触发的onPress事件。

我尝试过使用TouchableWithoutFeedback和onPressIn，但它似乎并没有被激发。这是我正在测试的代码。

class TouchableTextHighlight extends React.Component {

constructor (props) {
    super(props)

    this.state = {
        isHighlighted: false
    }
}

highlight () {
    console.log('pressed')
    this.setState({
        isHighlighted: true
    })
}

render () {
    let textColor = this.state.isHighlighted ? '#F44336' : null

    return (
        <TouchableWithoutFeedback {...this.props} onPressIn={() => {this.highlight}} onPress={this.props.onPress}>
            <View {...this.props}>
                <Text
                style={[this.props.textStyle, {color: textColor}]}
                >{this.props.text}</Text>
            </View>
        </TouchableWithoutFeedback>
    )
}

}

Answer 1

您需要调用该方法。变化：

onPressIn={() => {this.highlight}}

到

onPressIn={() => {this.highlight()}}

Answer 2

你的代码完全没问题，但你错过了一件非常重要的事情 - Binding functions。您的highlight函数未绑定到上下文。有很多方法可以绑定函数，但在这里我将介绍一种有效的方法。

highlight () {
console.log('pressed')
this.setState({
    isHighlighted: true
})
}

像这样重写上面的函数

highlight = () => {
console.log('pressed')
this.setState({
    isHighlighted: true
})
}

如果您想了解有关react check out here

中绑定的更多信息

在按下事件时反应Native Touchable

2 个答案: