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

Question

我在 Expo 中的 iPhone 上出现了一些 Pressable 元素，但根本无法触摸。我什至无法在元素检查器中单击它们。谁能指导我找到解决方案？我想知道它是否是嵌套，它是影响其行为的父容器，因为当我将 TouchableWithoutFeedback 更改为 View 时，它会立即“出现”并按应有的方式工作。为什么“TouchableWithoutFeedback”元素取消了我的 Pressable 元素而不是 TouchableOpacity 元素？根据文档，“TouchableWithoutFeedback 仅支持一个孩子”，但是将其中的所有内容放在一个 View 中也不能解决 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, right: 20, bottom: 20, left: 20 }}
                onPress={() => {
                  props.login();
                  !props.name ? errorMessage() : props.navigation.navigate("Race");
                }}
                style={({ pressed }) => [
                  {
                    backgroundColor: pressed ? "dodgerblue" : color,
                  },
                  styles.pressable,
                ]}>
                {({ 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",
    justifyContent: "center",
  },
  btnText: {
    color: "white",
    fontSize: 24,
  },
  input: {
    height: 50,
    width: 200,
    borderWidth: 1,
    borderColor: "#ccc",
    alignItems: "center",
    justifyContent: "center",
  },
  inputText: {
    width: "100%",
    height: "100%",
    fontSize: 24,
    textAlign: "center",
  },
  logo: {
    height: 70,
    marginBottom: 10,
    resizeMode: "contain",
    alignSelf: "center",
  },
  main: {
    width: width,
    alignItems: "center",
    justifyContent: "center",
  },
  nameInput: {
    alignItems: "center",
  },
  pressable: {
    marginTop: 20,
    width: width,
    height: 40,
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "rgba(0,0,0, .3)", // IOS
    shadowOffset: { height: 3, width: 3 }, // IOS
    shadowOpacity: 1, // IOS
    shadowRadius: 1, //IOS
    elevation: 2, // Android
    zIndex: 3,
  },
  text: {
    color: "#9d0208",
    textAlign: "center",
    lineHeight: 40,
    fontSize: 24,
  },
  titulo: {
    color: color,
    fontSize: 30,
    fontWeight: "bold",
  },
  subtext: {
    textAlign: "center",
    lineHeight: 24,
    fontSize: 16,
    width: "70%",
  },
  subtitulo: {
    marginTop: 10,
    color: color,
    fontSize: 30,
    fontWeight: "bold",
  },
});