聽PanResponder改變狀態值

Question

我很新反應母語，我面臨一個問題：

我瞭解，你可以用PanResponder，然後使用interpolate功能做變換。

例子：

let cardOpacity = {opacity: this.state.pan.x.interpolate({inputRange: [-150, 0, 150], outputRange: [0.9, 0, 0.9]})}; 

我面臨的問題是一個比較棘手，因爲我想從這個插值提取值，而不是任何風格：

我想該代碼的基本工作原理：

_renderApplyOrDislikeHint() { 
    let cardOpacity = {opacity: this.state.pan.x.interpolate({inputRange: [-150, 0, 150], outputRange: [0.9, 0, 0.9]})}; 
    let value = {opacity: this.state.pan.x.interpolate({inputRange: [-150, 0, 150], outputRange: [1, 0, 1]})}; 
    this.state.pan.x.addListener(({value}) => { 
    this.x = value._value 
    console.log('Value changed', this.x); 
    }); 
    let dimensionStyle = { 
    backgroundColor: 'white', 
    width: this.props.cardWidth, 
    height: this.props.cardHeight, 
    position: 'absolute' 
    }; 
    return (
    <Animated.View style={[dimensionStyle, cardOpacity]}> 
     {this.renderHint()} 
    </Animated.View> 
) 
} 

renderHint(){ 
    console.log('X in render hint', this.x) 
    return this.x > 0 ? <Text>Yes</Text> : <Text>Nope</Text> 
} 

的問題是，動畫價值的工作非常適合的款​​式，但他們不強迫renderHint()功能的重新渲染。 在渲染過程中改變狀態是一個非常糟糕的主意。

我該如何做到這一點？

Answer 1

SOOOO，我找到了解決辦法

基本上在反應過來，意見聽取組件的狀態：所以要「重新渲染」我們需要改變的狀態。

所以我加在鍋裏應答一個簡單的變化：

onPanResponderGrant: (e, gestureState) => { 
    this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value}); 
    this.state.pan.setValue({x: 0, y: 0}); 
    this.state.pan.x.addListener(({value}) => { 
     if (value < 0 && this.state.right){ 
     this.setState({right: false}) 
     } 
     else if (value > 0 && !this.state.right){ 
     this.setState({right: true}) 
     } 
    }); 
} 

然後只聽物業：

renderHint(){ 
    return this.state.right > 0 ? <Text>Right</Text> : <Text>Left</Text> 
}