使用样式移动按钮时，'hotspot'保持不变，但按钮会移动

Question

当使用样式将按钮移动到我想要的位置时，您可以按下按钮的可触摸区域保留在同一个位置，并且不跟随按钮。这使得按钮没有响应，只有在找到原始位置时才能按下！

我试过：

• 使用TouchableWithoutFeedback。
• 移动组件的顺序
• 将各种类型放入样式参考中。

这是渲染图：

render() {
if((this.state.isOn) === true){
    return(
      <ImageBackground source={require('./assets/water-in-glass.gif')} style={styles.container}>
      <Text>Timer:{ms(this.state.time,{verbose: true})}</Text>
  <TouchableOpacity
     onPressIn={this.onItemMouseDown} 
     onPressOut={this.onItemMouseUp}
     >
     <View>
     <Image source={require('./assets/MyButton.png')}/>
      </View>
      </TouchableOpacity>
      <TouchableOpacity
     onPress={this.resetTimer}
     >
     <View>
     <View style={styles.resetbutton}> 
       <Text style={styles.text}>Reset Timer</Text>
       </View> 
       </View>
     </TouchableOpacity>
     <TouchableOpacity
     onPress={this.onSubmit} 
     >
     <View>
     <View style={styles.submitbutton}>
     <Text style={styles.text}>Done!</Text>
     </View>
     </View>
     </TouchableOpacity>
    </ImageBackground>
    )
      } else if ((this.state.isOn) === false){  
    return(
      <ImageBackground source={require('./assets/water-in-glass.gif')} style={styles.container}>

     <Text>Timer:{ms(this.state.time)}</Text>  
     <TouchableOpacity
     onPressIn={this.onItemMouseDown} 
     onPressOut={this.onItemMouseUp}
     >
     <View>
     <Image source={require('./assets/MyButton.png')}/>
     </View>      
     </TouchableOpacity>
     <TouchableOpacity
     onPress={this.resetTimer}
     >
     <View>
     <View style={styles.resetbutton}> 
       <Text style={styles.text}>Reset Timer</Text>
       </View> 
       </View>
     </TouchableOpacity>
     <TouchableOpacity
     onPress={this.onSubmit} 
     >
     <View>
     <View style={styles.submitbutton}>
     <Text style={styles.text}>Done!</Text>
     </View>
     </View>
     </TouchableOpacity>
      {this.state.scoreArray.map(function(item,i){
        return (i < 5) ? <Text key={i}>{item}</Text> : null}).filter(x=>x)
        }
        <Text>
        {this.state.animalArray.map(function(item,i){
          return (i < 5) ? <Text key={i}>{item}</Text> : null}).filter(x=>x)
        }
        </Text>

  </ImageBackground>

这是样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  pissbutton: {
    padding: 10,
    borderWidth: 3,
    borderColor: '#111'
  },
  resetbutton: {
    padding: 10,
    borderWidth: 3,
    backgroundColor: '#ed1c42'
  },
  submitbutton: {
    marginBottom: 36,
    top: 100,
    padding: 10,
    borderWidth: 3,
    backgroundColor: '#42f471'
  }
});

我希望当我使用样式来移动按钮时，它们会保持响应，而不是移动，但热点仍保留在原处。

Answer 1

想通了。

按钮需要它自己的容器：

submitbuttoncontainer:{
    position: 'absolute',
    bottom: 50,
  },
  submitbutton: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 12,
    justifyContent: 'center',
    width: 100,
    alignItems: 'center',

  }

哇。这在任何地方都完全不清楚。我怀疑这是我缺乏编码基础知识。