TouchableOpacity在绝对视图Android React Native中不起作用

Question

过去2个小时我一直试图解决此问题，但似乎无法正常工作。我已经在React Native中制作了一个自定义键盘，它可以在我的iOS上完美运行。但是，在Android上，我似乎无法按下TouchableOpacity。我按的所有内容都通过键盘输入。

我尝试用TouchableNativeFeedback替换TouchableOpacity，这至少给了它波纹效果。但是，OnPress代码永远不会执行。我试图将组件嵌套在<View>中，但也没有起作用。不知道如何解决这个问题。这是我的代码：

const styles = StyleSheet.create({
  keyboardContainer: {
    position: "absolute",
    bottom: 0,
    zIndex: 1000,
    height: width * 0.8,
    width: width,
    backgroundColor: "rgb(1,80,185)",
    flexDirection: "row",
    flexWrap: "wrap",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 7,
    },
    shadowOpacity: 0.43,
    shadowRadius: 9.51,
    elevation: 1000,
  },
  buttonNum: {
    borderColor: "white",
    width: width * 0.25,
    height: width * 0.2,
    justifyContent: "center",
    alignItems: "center",
  },
  numText: {
    fontSize: 25,
    color: "white",
  },
});

class Keyboard extends Component {
  static contextType = KeyboardContext;

  render() {
    if (this.context.keyboard)
      return (
        <View style={styles.keyboardContainer}>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("1")}
          >
            <Text style={styles.numText}>1</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("2")}
          >
            <Text style={styles.numText}>2</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("3")}
          >
            <Text style={styles.numText}>3</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.setContext({ keyboard: false })}
          >
            <Icon name="keyboard-close" style={styles.numText} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("4")}
          >
            <Text style={styles.numText}>4</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("5")}
          >
            <Text style={styles.numText}>5</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("6")}
          >
            <Text style={styles.numText}>6</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.buttonNum} onPress={this.removeText}>
            <Icon name="plus-circle" style={styles.numText} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("7")}
          >
            <Text style={styles.numText}>7</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("8")}
          >
            <Text style={styles.numText}>8</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("9")}
          >
            <Text style={styles.numText}>9</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("-")}
          >
            <Icon name="minus-circle" style={styles.numText} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText(".")}
          >
            <Text style={styles.numText}>.</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={() => this.context.handleText("0")}
          >
            <Text style={styles.numText}>0</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={this.context.removeText}
          >
            <Feather name="delete" style={styles.numText} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={this.context.clearText}
          >
            <Text style={[styles.numText, { fontSize: 18 }]}>CLEAR</Text>
          </TouchableOpacity>
        </View>
      );
    return null;
  }
}

Answer 1

嗯，我几乎完全重新制作了您的代码（以我的示例为例）希望对您有所帮助：

export default class Keyboard extends Component {

  static contextType = KeyboardContext;

  renderKey(digit) {

    return (
      <TouchableOpacity
        style={styles.buttonNum}
        onPress={() => this.context.handleText(digit)}
      >
        <Text style={styles.numText}>digit</Text>
      </TouchableOpacity>
    )
  }

  render() {
    if (this.context.keyboard){

      const keys = [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['-', ',', '0']
      ]

      const keypad = []

      for (let i = 0; i < keys.length; i++) {
        keypad.push((
          <View key={keys[i].join("|")} style={s.row}>
            {this.renderKey(keys[i][0])}
            <View style={s.innerLineOffset}/>
            {this.renderKey(keys[i][1])}
            <View style={s.innerLineOffset}/>
            {this.renderKey(keys[i][2])}
          </View>
        ))
      }

      return (
        <View style={styles.keyboardContainer}>
          {keypad}
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={this.context.removeText}
          >
            <Feather name="delete" style={styles.numText} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.buttonNum}
            onPress={this.context.clearText}
          >
            <Text style={[styles.numText, { fontSize: 18 }]}>CLEAR</Text>
          </TouchableOpacity>
        </View>
      )

    } else {
      return null;
    }
  }
}

const styles = StyleSheet.create({
  keyboardContainer: {
    position: "absolute",
    bottom: 0,
    zIndex: 1000,
    height: width * 0.8,
    width: width,
    backgroundColor: "rgb(1,80,185)",
    flexDirection: "row",
    flexWrap: "wrap",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 7
    },
    shadowOpacity: 0.43,
    shadowRadius: 9.51,
    elevation: 1000
  },
  buttonNum: {
    borderColor: "white",
    width: width * 0.25,
    height: width * 0.2,
    justifyContent: "center",
    alignItems: "center"
  },
  numText: {
    fontSize: 25,
    color: "white"
  }
})

如果没有，请确保更改您的keyboardContainer样式。