React Native：如何为嵌套TouchableOpacity的View添加光标指针

Hey there! Let's work through this cursor pointer issue you're hitting. First off, the reason you're getting an error when using cursor in StyleSheet.create is simple: React Native's StyleSheet system doesn't support the cursor property at all—that's a web-only CSS attribute, and RN's native style engine doesn't recognize it.

Let's break down solutions based on which platform you're targeting:

For React Native Web #

If you're building for the web, you can still use the cursor property—you just can't put it inside StyleSheet.create. Instead, pass it directly as an inline style to your View or TouchableOpacity. RN Web will translate this style to the underlying DOM element, which will show the pointer cursor when hovering.

Here's a quick example:

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      {/* Add cursor directly to the TouchableOpacity */}
      <TouchableOpacity 
        style={{ ...styles.button, cursor: 'pointer' }}
        onPress={() => console.log('Button pressed!')}
      >
        <Text style={styles.buttonText}>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#2196F3',
    borderRadius: 4,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

You can also add cursor: 'pointer' to the parent View if you want the entire surrounding area to show the pointer, not just the TouchableOpacity itself.

For iOS/Android Native #

On mobile platforms, there's no such thing as a "cursor pointer" since users interact via touch instead of a mouse. Instead, you can add visual feedback to let users know the area is interactive:

• Use the activeOpacity prop on TouchableOpacity to make the element fade slightly when pressed (e.g., activeOpacity={0.7}—this is a built-in RN feature).
• Add subtle styling like a shadow, border, or color change on press to indicate interactivity.

Example with activeOpacity:

<TouchableOpacity 
  style={styles.button}
  activeOpacity={0.7} // Adds smooth press feedback
  onPress={() => console.log('Button pressed!')}
>
  <Text style={styles.buttonText}>Tap Me</Text>
</TouchableOpacity>

To recap:

• For web: Use inline cursor: 'pointer' (skip StyleSheet.create for this specific property)
• For mobile: Use native touch feedback like activeOpacity instead of a cursor

内容的提问来源于stack exchange，提问作者Elivan K.