标签: touchablehighlight

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组件有一个奇怪的问题.我有一个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 …

如何防止用户在React native中点击两次按钮？

即用户必须无法在可触摸的高光上快速点击两次

如果我想防止View组件上的 onPress 事件传播到Touchable以下Sample组件的父级，除了将子视图包装在一个中之外，最好的选择是Touchable什么？

export default function Sample (): Element<*> {
  return(
    <TouchableOpacity>
      <View>
        <Text>Sample</Text>
      </View>
    </TouchableOpacity>
  );
}

我在 Flatlist 的行项目内呈现了 TouchableOpacity。我想在用户点击该项目时显示点击效果。但是，当用户开始滚动时也会触发点击效果。如何在用户滚动时禁用突出显示效果？

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

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

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

我遇到了一个问题，嵌套 Touchable 中的双击（同时触摸）到达父 Touchable。

在下面的示例中，Touchable 嵌套了三层深。当我按下最深的可触摸（蓝色）时，控制台正确打印“蓝色”。当我按下分别打印“绿色”和“红色”的其他图层时，它的行为也正确。

当我同时进行两次触摸和释放时会出现奇怪的行为 - 然后根本不会调用触摸层的 onPress 。相反，当两个触摸都结束时，父 Touchable 只接收一次触摸。

此外，当我在最外层（红色，没有父级可触摸）执行两个同时触摸时-该层将接收触摸。从我的角度来看，这似乎更正确，但与上述嵌套 Tocuables 中的怪异行为背道而驰。

<View style={{flex:1, backgroundColor:"#666666"}}>

    <TouchableHighlight onPress={()=>{console.log("red")}}>
      <View style={{backgroundColor:"#FF0000", height:300}}>   
        <TouchableHighlight onPress={()=>{console.log("green")}}>
          <View style={{backgroundColor:"#00FF00", height:200}}>
            <TouchableHighlight onPress={()=>{console.log("blue")}}>
              <View style={{backgroundColor:"#0000FF", height:100}} />
            </TouchableHighlight>
          </View>
        </TouchableHighlight>
      </View>
    </TouchableHighlight>
</View>

我正在开发一个简单的 react-native 应用程序，并且在 TouchableHighlight 上遇到了一个问题：

按 时TouchableHighlight，将显示一个新屏幕（使用 中的 StackNavigator react-navigation）。按下后退按钮并返回到原始屏幕后，TouchableHighlight仍然具有黑色背景色 - 这意味着它仍然突出显示。

我的问题是：

• 有没有办法手动停用TouchableHighlight-component的突出显示？这样我就可以在onPress运行后禁用突出显示。
• TouchableHighlight突出显示停留的可能原因是什么？我在没有导航的情况下在应用程序的其他部分使用它，我可以想象它与此有关。

在TouchableHighlight一个FlatList中存在。renderItems 方法如下所示：

let handlePress = () => {
    this.props.navigation.navigate('DetailsScreen');
};
return <TouchableHighlight
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableHighlight>;

如果您需要/想要任何进一步的信息，请告诉我。我已经在 android 上测试了代码，使用带有 Marshmallow 的 Genymotion 模拟器。

版本是：

• 节点-v：8.9.4
• npm -v: 5.6.0
• react-native-cli: 2.0.1
• 反应原生：0.54.2
• 反应导航：1.5.2
• 构建环境：Windows 10 64位

在这一点上，我很确定错误在我的代码中，因为TouchableHighlight在我的应用程序的其他部分正常工作，并且它可能与导航调用有关，但我无法确定，究竟是为什么。我已经确保我的应用程序中没有异常或类似的东西，因此 onPress 方法成功完成。

我有一个组件：

<TouchableHighlight
    style={styles.button}
    underlayColor='red'
    onPress={() => this.bootEvent(item)}>
    <Text style={{ color: '#ffffff', fontSize: 12, fontWeight: 'bold' }}>Text</Text>
</TouchableHighlight>

这是样式：

button: {
    alignItems: 'center',
    backgroundColor: '#4267b2',
    padding: 8
}

问题是，当我单击按钮时，会调用 onPress 函数，但 TouchableHighlight 的颜色保持不变。

我也试过这个：

underlayColor={'red'}

带括号，但它是一样的。

我是 React Native 的新手，我正在尝试做一些非常简单的事情：

我想创建以下组件：

一个可触摸的亮点，其图像左对齐，文本相对于 Touchable 居中。

我尝试了很多选项，例如向文本添加填充或边距，但这只会使按钮更大，而且似乎不是最干净的方法。

这是我到目前为止所得到的：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.appContainer}>
        <TouchableHighlight onPress={() => {}} style={styles.button}>
          <View style={styles.btnContainer}>
            <Image source={require('./assets/ic_logout.png')} style={styles.icon} />
            <Text style={styles.btnText}>Log out</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: 'lightgreen',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnContainer: {
    backgroundColor: '#1d2aba',
    paddingHorizontal: 60,
    paddingVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 5
  },
  button: {
    borderRadius: …