Question

我面临一个奇怪的问题。在我的本机应用中，如果我将onPress事件设置为View，则不会触发它，但如果我将Text设置为View，则会触发它。我在这里缺少什么？

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

为什么会这样？这是React Native的问题吗？我使用的是版本0.43

Answer 1

您可以将TouchableOpacity用于onPress事件。 View并未提供onPress道具。

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

Answer 2

您可以使用TouchableWithoutFeedback打包视图，然后像往常一样使用onPress和朋友。你还可以通过在子视图上设置属性来阻止pointerEvents，它甚至会阻止父TouchableWithoutFeedback上的指针事件，它很有趣，这是我在Android上的需要，我没有测试iOS的：

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

Answer 3

或者，您也可以向视图提供onStartShouldSetResponder，如下所示：

asio::io_service ioService;

asio::io_service::strand strandFromIoService{ioService};
asio::io_service::strand strandFromStrand{strandFromIoService};

strandFromIoService.post(boost::bind(&firstFunction));
strandFromStrand.post(boost::bind(&secondFunction));

// then use a pool of threads to service io_service ...
// can firstFunction and secondFunction be executed in one time?

Answer 4

您可以使用TouchableOpacity，TouchableHighlight，TouchableNativeFeedback来实现。 View组件不提供onPress作为道具。因此，您可以使用这些代替。

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>

Answer 5

onPress 对 <View> 标签不起作用，使用 <TouchableOpacity> 而不是 View

<View>
<TouchableOpacity onPress={() => 'call your function here'}>
</TouchableOpacity>
</View>

Answer 6

查看不提供onPress道具。可选，您可以使用

<View onStartShouldSetResponder={() => console.log("View click")}>
  <Text>X</Text>
</View>

否则，您可以使用 TouchableOpacity

<TouchableOpacity onPress={this._onPress}>
<Text>X</Text>
</TouchableOpacity>

Answer 7

对于寻求解决方案的任何人，从RN 0.63开始，都有一个新的Pressabe API。它可能更早推出了几个版本，但在此类用例中非常有用。

<Pressable onPress={onPressFunction}>
    <Text onPress={() => {
        console.log('works');
    }}>X</Text>
</Pressable>

Answer 8

我们可以让 View 有一个 onPress 道具 onStartShouldSetResponder 和 onResponderGrant

<View
    onStartShouldSetResponder={() => true}
    onResponderGrant={() => console.log("view pressed")}
  >
</View>

Answer 9

您可以为此使用 TouchableOpacity

<TouchableOpacity onPress={() => {your code here}}>
    //Your inner views here
</TouchableOpacity>

React Native：查看onPress不起作用

9 个答案: