Question

在这里，我试图通过更改＆＃34; top＆＃34;来移动可触摸的元素。和＆＃34;左＆＃34;价值如下所示。问题是，对于＆＃34;（数字＆gt; 4）＆＃34;它没有按预期工作。除此之外，只有＆＃34; top＆＃34;价值变化会影响元素，而变化则会影响元素。没有效果。我在这里一无所知，请帮忙

移动功能：

moveTo(index, number, onMoveFinish) {
 const x = index % 9;
 const y = (index - x) / 9;
 const gap = 2;

 var left = CellSize * x - gap
 var top = CellSize * (y - 9) - CellSize - gap

 if(number > 4){
   left = (BoardWidth / 9 * (number + 1) + (BoardWidth / 9 - CellSize) / 2)
   top = top - ((2 + CellSize * 1.1) + (CellSize / 3))
 }

 LayoutAnimation.configureNext(spring);
 this.setState({ left, top });
 setTimeout(() => {
   onMoveFinish && onMoveFinish();
 }, 25000);
}

渲染功能：

render() {
if (this.state.hide) return null;
const { number } = this.props;
var { left, top } = this.state;

if(number > 4){
  top = top + ((2 + CellSize * 1.1) + (CellSize / 3))
  left = (BoardWidth - (CellSize * 4.4 + ((CellSize / 3) * 3) + 16)) / 2 +
          (number - 5) * ((CellSize / 3) + (CellSize * 1.1))
}

return (
  <Touchable onPress={this.onPress} style={[styles.container, {top, left}]} >
    <View style={styles.cell} >
      <Text style={styles.text}>{number + 1}</Text>
    </View>
  </Touchable>
 );
 }
}

风格：

 const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: CellSize,
    height: CellSize,
  },
  cell: {
   width: CellSize * 1.1,
   height: CellSize * 1.1,
   backgroundColor: 'transparent',
   alignItems: 'center',
   justifyContent: 'center',
  },
});

left属性属性对元素没有影响

0 个答案: