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

时间:2020-04-28 18:13:46

标签: javascript android react-native

过去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;
  }
}

0 个答案:

没有答案