在 React Native 应用程序中可按下不可触摸

如何解决在 React Native 应用程序中可按下不可触摸

我有一些可按元素出现在我的 iPhone 上 Expo 上，但根本不可触摸。我什至无法在元素检查器中单击它们。任何人都可以指导我解决问题吗？我想知道它是否是嵌套及其父容器影响它的行为，因为当我将 TouchableWithoutFeedback 更改为视图时，它会立即“出现”并按预期工作。为什么“TouchableWithoutFeedback”元素会取消我的 pressable 元素而不是 TouchableOpacity 元素？根据文档，“TouchableWithoutFeedback 只支持一个孩子”，但是将所有内容都放在一个视图中也不能解决 pressable 的这个问题。由于它的工作原理，似乎 pressable 不能存在于这个可触摸元素中？

代码如下：

import React from "react";
import { Dimensions,StyleSheet,Text,View,Image,TextInput,pressable,KeyboardAvoidingView,Keyboard } from "react-native";
import { TouchableOpacity,TouchableWithoutFeedback } from "react-native-gesture-handler";
const { width,height } = Dimensions.get("window");
const color = "#d00000";

const errorMessage = () => {
  console.log("errorMessage triggered");
  Alert.alert("Please enter a name for your character");
};

const Home = (props) => {
  return (
    <KeyboardAvoidingView style={styles.container} behavior='padding'>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>

        <Image style={styles.logo} source={require("../assets/logo.jpg")} />
        <View style={styles.main}>
          <Text style={styles.titulo}>JW's D&D 5e</Text>
          <Text style={styles.subtitulo}>Character Generator</Text>

          <View style={styles.bodyText}>
            <Text style={styles.subtitulo}>Welcome!</Text>
            <Text style={styles.text}>On the following screens you'll choose premade basics for your new character: Race,class,background,plus a photo uploaded from your camera library.</Text>
            <Text style={styles.subtext}>(Your info is stored locally in your device until you 'log out' within the app.)</Text>
          </View>

          {/* DIVIDER */}
          <View
            style={{
              width: "80%",marginTop: 10,marginBottom: 10,borderBottomWidth: StyleSheet.hairlinewidth,borderBottomColor: "#000",alignSelf: "center",}}
          />

          {props.loggedIn === true ? (
            <pressable
              hitSlop={20}
              pressRetentionOffset={{ top: 20,right: 20,bottom: 20,left: 20 }}
              onPress={() => props.logout()}
              style={({ pressed }) => [
                {
                  backgroundColor: pressed ? "dodgerblue" : color,},styles.pressable,]}>
              {({ pressed }) => <Text style={styles.btnText}>{pressed ? "Later!" : "logout"}</Text>}
            </pressable>
          ) : (
            <View style={styles.nameInput}>
              <Text style={styles.text}>Enter your character's name: </Text>
              <View style={styles.input}>
                <TextInput placeholder='Character name' value={props.name} onChangeText={(text) => props.setName(text)} style={styles.inputText} />
              </View>

              <pressable
                hitSlop={40}
                pressRetentionOffset={{ top: 20,left: 20 }}
                onPress={() => {
                  props.login();
                  !props.name ? errorMessage() : props.navigation.navigate("Race");
                }}
                style={({ pressed }) => [
                  {
                    backgroundColor: pressed ? "dodgerblue" : color,]}>
                {({ pressed }) => <Text style={styles.btnText}>{pressed ? "Let's go!" : "Start your adventure!"}</Text>}
              </pressable>
            </View>
          )}
        </View>

      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,flexDirection: "column",backgroundColor: "white",// alignItems: "center",justifyContent: "center",width: width,height: height,bodyText: {
    width: "95%",marginTop: 20,alignItems: "center",btnText: {
    color: "white",fontSize: 24,input: {
    height: 50,width: 200,borderWidth: 1,borderColor: "#ccc",inputText: {
    width: "100%",height: "100%",textAlign: "center",logo: {
    height: 70,resizeMode: "contain",main: {
    width: width,nameInput: {
    alignItems: "center",pressable: {
    marginTop: 20,height: 40,borderRadius: 5,shadowColor: "rgba(0,.3)",// IOS
    shadowOffset: { height: 3,width: 3 },// IOS
    shadowOpacity: 1,// IOS
    shadowRadius: 1,//IOS
    elevation: 2,// Android
    zIndex: 3,text: {
    color: "#9d0208",lineHeight: 40,titulo: {
    color: color,fontSize: 30,fontWeight: "bold",subtext: {
    textAlign: "center",lineHeight: 24,fontSize: 16,width: "70%",subtitulo: {
    marginTop: 10,color: color,});