Я пытался решить эту проблему в течение последних 2 часов, и я не могу заставить ее работать. Я сделал свою собственную клавиатуру в React Native, и она отлично работает на моем iOS. Однако на Android я не могу нажать TouchableOpacity. Все, что я нажимаю, проходит через клавиатуру.
Я пытался заменить TouchableOpacity на TouchableNativeFeedback, и это дает по крайней мере эффект ряби. Однако код 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;
}
}