You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native中TouchableOpacity部分角落无法点击的求助

React Native中TouchableOpacity部分角落无法触发点击的问题

我在React Native项目中使用View、ScrollView与TouchableOpacity组件实现点击跳转功能,但发现TouchableOpacity的部分角落区域无法触发点击(演示动图:点击异常演示)。我已尝试将原循环渲染代码改为静态代码,但问题仍未解决。

相关代码

调用LearnCard的代码:

<LearnCard
          title={"What is CBT?"}
          excerpt={"Learn more about CBT and how it can benefit you."}
          image={<WhatIsCBT />}
          content={`Cognitive Behavioural Therapy or CBT is type of talking therapy that can 
              help you to change the way you think and behave in your everyday life. 
              Whilst CBT therapy can be administered by a practitioner, many of the 
              techniques can be practiced on a daily basis by yourself, enabling you to 
              become your own expert in making practical changes to improve your 
              state of mind. \n
              CBT has been proven to work by over a 1,000 studies and can be effective
              in helping individuals with a number of issues, including anxiety, 
              depression, panic disorder and sleep problems. It's based on the idea that 
              our thoughts, feelings and actions are connected. CBT aims to help you 
              manage overwhelming and negative feelings by offering ways to reflect 
              and challenge them, breaking down negative patterns that keep us feeling
              low. \n
              CBT focuses on the present here-and-now, helping you to find coping 
              mechanisms for challenging situations, whilst relieving negative 
              symptoms. Through regularly utilising the tools offered in our Pocket CBT, 
              you will be able to better recognise your own unhealthy thinking patterns, 
              create new coping mechanisms for stressful situations and feel a stronger 
              sense of mental wellbeing.`}
        />
        <LearnCard
          title={"Practicing gratitude"}
          excerpt={"Acknowledging positive thoughts and feelings."}
          image={<PractisingGratitude />}
          content={`A big part of CBT involves acknowledging positive thoughts and feelings, 
          as well as challenging the negative ones. Practicing gratitude can have a 
          significant on our mental health and positivity. \n
          Try using the 'Practicing Gratitude' section of Pocket CBT to record 
          anything that you notice about your day that you're grateful for. This 
          might be something big, like being grateful for your children, or something
          small, like your morning coffee. \n
          Noticing these moments of being grateful or happy can help us to rewire 
          our brains to develop a more optimistic mindset, naturally placing a 
          stronger focus on the positive parts of our life, and less on the negative.\n`}
        />

LearnCard组件内部代码:

<View style={styles.guidecardbigContainer}>
      <View style={{ width: 312, height: 120 }}>{image}</View>

      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: width - 40,
          marginTop: 15,
        }}
      >
        <View>
          ...
        </View>

        <View style={{ alignSelf: "flex-end", marginBottom: 6 }}>
          <TouchableOpacity style={[styles.primaryBtnContainer, {width: 104, height: 44}]} onPress={() => navigation.navigate("CardViewer", { text: content, title: title })}>
            <Text style={[styles.primaryText, {fontSize: 16}]}>Learn</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>

请问有人知道这一问题的原因吗?


内容的提问来源于stack exchange,提问作者ImDarkk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 07:25:05