草庐IT

android - React Native，TouchableOpacity 包装 float 按钮一无所获

coder 2023-12-08 原文

我正在创建一个简单的操作按钮( float 按钮)

这是有效的:

<View style={{
    width: this.props.size,
    height: this.props.size,
    borderRadius: this.props.size / 2,
    backgroundColor: '#ee6e73',
    position: 'absolute',
    bottom: 10,
    right: 10,
    flexDirection:'row'
}}>
    <Text>
        +
    </Text>
</View>

这不是:

<TouchableOpacity
        onPress={()=>{
        }} >
    <View style={{
        width: this.props.size,
        height: this.props.size,
        borderRadius: this.props.size / 2,
        backgroundColor: '#ee6e73',
        position: 'absolute',
        bottom: 10,
        right: 10,
        flexDirection:'row'
    }}>
        <Text>
            +
        </Text>
    </View>
</TouchableOpacity>

只需用 TouchableOpacity 包装，然后我的按钮就不会出现任何错误。

react 0.1.7，安卓

然后我尝试将样式从 View 移动到 TouchableOpacity，成功了

<TouchableOpacity
        onPress={()=>{
        }} 
        style={{
            width: this.props.size,
            height: this.props.size,
            position: 'absolute',
            borderRadius: this.props.size / 2,
            backgroundColor: '#ee6e73',
            bottom: 10,
            right: 10,
        }}>
    <Text>
        +
    </Text>
</TouchableOpacity>

谁能解释一下为什么？

React Native 文档说

[ https://facebook.github.io/react-native/docs/touchableopacity.html][1]

A wrapper for making views respond properly to touches. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

这意味着我包装了我的原始 View ，它会按我预期的那样工作，但事实并非如此。

最佳答案

根据我的经验，TouchableOpacity 不适用于 absolute定位。也许如果你删除它，onPress 将再次工作。

另请注意，首先渲染什么元素以及最后渲染什么元素非常重要。

例如，如果您这样做:

<View>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
           {console.log("It works or not?")}}>
   </TouchableOpacity>
    <Text style={styles.aStyle}>
        Some text bla bla......
    </Text>
</View>

文本很有可能会呈现在 TouchableOpacity 之上，因此您将无法获得 onPress工作。

然后因为位置是绝对的，你所要做的就是将它呈现为 View 的最后一个 subview :

<View>
    <Text style={styles.aStyle}>
        Some text bla bla
    </Text>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
       {console.log("It works or not?")}}>
   </TouchableOpacity>
</View>

关于android - React Native，TouchableOpacity 包装 float 按钮一无所获，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34139687/

一无一无所获TouchableOpacitycodegtandroidreact-nativefloating-action-button

有关android - React Native，TouchableOpacity 包装 float 按钮一无所获的更多相关文章

  1. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  2. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  3. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  4. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  5. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  6. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  7. ruby-on-rails - 32651 :ERROR comparison of Float with Float failed ruby - 2

    我是Rails的新手，我遇到了一个错误，但我似乎找不到问题所在。这是日志:[32651:ERROR]2012-10-0913:46:52::comparisonofFloatwithFloatfailed[32651:ERROR]2012-10-0913:46:52::/home/sunny/backend/lib/analytics/lifetime.rb:45:in`each'/home/sunny/backend/lib/analytics/lifetime.rb:45:in`max'/home/sunny/backend/lib/analytics/lifetime.rb:45

  8. ruby - 为什么在 Ruby 中是 Float::INFINITY == Float::INFINITY？ - 2

    在数学中，2个无穷大既不等于，也不大于或小于then。那么是什么给了？在irb中，Float::INFINITY==Float::INFINITY(在ruby​​1.9.3中测试) 最佳答案 用更专业的术语来说，这一切都归结为浮点运算的IEEE754标准。TheIEEE754standarddoesimplicitlydefineInfinity==Infinitytobetrue.Therelevantpartofthestandardissection5.7:"Fourmutuallyexclusiverelationsarep

  9. ruby - 强制 Ruby 不以标准形式/科学记数法/指数记数法输出 float - 2

    我遇到了同样的问题here对于python，但对于ruby​​。我需要输出这样一个小数字:0.00001，而不是1e-5。有关我的特定问题的更多信息，我正在使用f.write("Mynumber:"+small_number.to_s+"\n")输出到一个文件对于我的问题，准确性不是什么大问题，所以只做一个if语句来检查是否small_number那么更通用的方法是什么？ 最佳答案 f.printf"Mynumber:%.5f\n",small_number您可以将.5(小数点右侧5位数字)替换为您喜欢的任何特定格式大小，例如，%8

  10. ruby - 使用 Ruby 将输入值适本地转换为整数或 float - 2

    我相信我对这个问题有一个很好的答案，但我想确保ruby​​-philes没有更好的方法来做到这一点。基本上，给定一个输入字符串，我想在适当的情况下将该字符串转换为整数，或在适当的情况下将其转换为float。否则，只返回字符串。我会在下面发布我的答案，但我想知道是否有更好的方法。例如:to_f_or_i_or_s("0523.49")#=>523.49to_f_or_i_or_s("0000029")#=>29to_f_or_i_or_s("kittens")#=>"kittens" 最佳答案 我会尽可能避免在Ruby中使用正则表达式

随机推荐