听 PanResponder 更改状态值答案

【问题标题】：Listen to PanResponder to change state values听 PanResponder 更改状态值
【发布时间】：2017-03-29 13:53:34
【问题描述】：

我对 React Native 很陌生，但遇到了一个问题：

我了解您可以使用 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() 函数。在渲染过程中改变状态是一个非常糟糕的主意。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript react-native jsx

【解决方案1】：

太好了，我找到了解决办法

基本上在 React 中，视图正在监听组件的状态：所以要“重新渲染”我们需要更改状态。

因此我在 pan 响应器中添加了一个简单的更改：

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

【讨论】：