私はネイティブを反応させるためにかなり新たなんだと私は問題に直面しています状態値に

Question

を変更するPanResponderを聴く：

私はあなたが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

サイコー、ビューは、コンポーネントの状態を聞いている：私たちは状態を変更する必要があり、「再描画」に。

は、したがって、私はパンレスポンダーで簡単な変更を追加しました：

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> 
}