标签: touchableopacity

TouchabelOpacity 在 iOS 上运行良好，但 onPress 方法对我来说在 Android 上不起作用。

我的本机版本：0.57.4

我的代码：

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);

<TouchableOpacity style={{ flex: 1 }} >
  <ImageBackground
    source={require('../../images/home.jpg')}>
      <View style={styles.item} collapsable={false}>
        <H3>{contentData[i].name}</H3>
        <Text>{contentData[i].description}</Text>
      </View>
  </ImageBackground>
</TouchableOpacity>

我有TouchableOpacity一个ScrollView. 我想禁用高亮效果的TouchableOpacity。滚动时，我只想在onPress触发事件时突出显示。因为它可能会混淆用户它被按下。

即使本文档(https://facebook.github.io/react-native/docs/gesture-responder-system.html)指出,触摸事件也会传递给子节点,并且仅由父节点使用,如果孩子对事件没有反应,我面对的问题是,嵌套在另一个TouchableOpacity内的TouchableOpacity对触摸没有正确反应.

我的结构如下

<ScrollView>
  <TouchableOpacity onPress={() => console.log('This is printed always')}>
    <View>
      <Text>I can click here</Text>
      <TouchableOpacity onPress={() => console.log('This is printed never')}>
        <Text>I can click here but the outer onPress is called instead of the inner one</text>
      </TouchableOpacity>
    </View>
  </TouchableOpacity>
</ScrollView>

TouchableOpacitys中的按钮也是如此:单击按钮调用父TouchableOpacity的onPress方法

我在监督什么吗？

我开始学习React Native,对于我的项目,我创建了一个简单的Button组件,可以在我的项目中重用.我根据变量'disabled'动态设置不透明度值,但是,按钮的外观不会随着opacity变量的值而变化.我四处搜索,我没有找到解释..
任何帮助将不胜感激.

这是我的源代码:

import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

//TODO: arrumar o problema com a opacidade
export default function Button({text, onPress, style, disabled, textStyle}) {
    let opacity = disabled === true ? 0.5 : 1
    // console.log('opacity', opacity)
    return (
        <TouchableOpacity onPress={onPress} style={[defaultStyles.button, style, {opacity: opacity}]} 
            disabled={disabled}>
            <Text style={[defaultStyles.text, textStyle]}>{text}</Text>
        </TouchableOpacity>
    )

}

const defaultStyles = StyleSheet.create({
    text: {
        color: 'white'
    },
    button: {
        backgroundColor: 'black',
        margin: 15, …

我对TouchableOpacity组件有一个奇怪的问题.我有一个MainButton组件,需要2个道具,item和disabled.根据disabled道具,我希望我的MainButton组件应用不同的样式.问题是TouchableOpacity组件重新渲染时不刷新样式.道具disabled在重新渲染时正确设置.

是什么让这个奇怪的是,如果我把它改成一个TouchableHeighlight它按预期工作.

有谁知道为什么？这是TouchableOpacity中的一个错误吗？

import React, { Component } from 'react'
import UI from '../styles/ui'

import {
  Text,
  TouchableOpacity
} from 'react-native'

const ui = new UI()
const styles = ui.styles

class MainButton extends Component {
  constructor (props) {
    super(props)
    this.state = {
      disabled : props.disabled,
      item: props.item
    }
  }

  componentWillReceiveProps(props) {
    this.setState({disabled:props.disabled})
  }

  render() {
    var normalStyles = [styles.mainButton,styles.widthEighty]
    var disabledStyle = [styles.mainButton,styles.widthEighty,styles.lowOpacity]
    var …

我有3个简单的React组件-

首先是实际视图（让我们将此屏幕命名为A）-

return(
    <ImageBackground
    ...
    >
       <ScrollView>


          <ChildButton
            onPress={this.someFunction.bind(this)}
           />

       </ScrollView>
    </ImageBackground>
)

然后是ChildButton组件---

    return(
    <ChildButton>
       <Button
         style={...someStyleObject}
         onPress={this.props.onPress}
        >

       </Button>

    </ChildButton>
)

然后有Button组件-

return (
<TouchableOpacity
  onPress={this.props.onPress}
 >
    {this.props.children}
</TouchableOpacity>

)

这里的主要问题是我的onPress没有从屏幕A调用，仅在Android上。在iOS上运行正常。可能的原因是什么？

注意：我已经将控制台放入ChildButton和Button组件中，并且它们没有被打印出来。

嗨,我想在文本中包含TouchableOpacity,因为我想使一些文本可点击.当我在Text中包装所有内容时,它看起来很完美,这就是我希望它看起来的样子.

 <Text 
   style={{color: colors.black,
           fontSize: 12,
           fontWeight: 'normal',
           marginTop: 10,
           lineHeight: 18}}>
      {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          {/* <TouchableOpacity onPress={ this.termsOfService }>
            <Text style={{color: colors.primaryColor,
                          fontSize: 12,
                          fontWeight: 'normal',}}>
              {strings.loginPrivacyTermsCondFour}
            </Text>
          </TouchableOpacity> */}
      </Text>

当我添加TouchableOpacity时,它不起作用.

我尝试在视图中添加它然后它工作正常,我能够添加TouchableOpacity但从UI角度来看,它们没有正确对齐.

以下是仅显示文本的屏幕截图,其中TouchableOpacity不起作用,第二位位于View中,其中TouchableOpacity起作用但看起来不正确.

怎么能让它看起来像第一位.任何建议非常感谢.

谢谢R

我有以下代码

<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
        <View style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>

        </View>
    </TouchableOpacity>
</BlurView>

结果如下

我有 TouchableOpacity 覆盖 BlurView 区域，因为我希望完整的模糊视图屏幕响应触摸事件并将其隐藏。除了中心的景色。它将包含视频，并且不能接收其父组件的触摸事件，并且必须具有自己的触摸事件。

我该怎么做呢？或者我愿意知道是否有其他方法可以达到类似的结果。

我正在 react-native 上构建一个移动应用程序！最近我为每个页面构建了自己的标题组件。这是我的 Header 组件的代码。我在该组件中有两个图标。但不幸的是，这些按钮根本不起作用！！

import React, {Component} from 'react';
import { 
    Text, 
    View, 
    Image, 
  Dimensions,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import Styles from './Styles';

export default class ChatHead extends Component {
  constructor(props) {
      super(props);

      this.state = {
      }
  }

  render(){
    console.log(this.props.headerText, this.props);
    if(this.props.headerText.length > 16){
      name = this.props.headerText.substr(0, 16);
      name += "..."; 
    }
    else name = this.props.headerText;

    return(
      <View style={Styles.viewStyle}>
        <Text style={Styles.nameStyle}>{name}</Text>

        <TouchableOpacity 
          style={Styles.audioCallButton}
          onPress={() => console.log("Audio Button Pressed")}
        >
          <Icon name={'md-call'} size={25} color="white" align='right'/>
        </TouchableOpacity> …

我有一段简单的代码，它只是一个带有 onLongPress 道具的 TouchableOpacity，但它似乎不起作用。

<TouchableOpacity delayLongPress={10} onLongPress={()=>{console.log("pressed")}} activeOpacity={0.6}>
  <Text>BUTTON</Text>
</TouchableOpacity>

我试过删除延迟道具，但这仍然不起作用。然而，将 onLongPress 更改为 onPress 似乎确实有效，但我想要长按功能。我正在 Android 模拟器上对此进行测试。