Hey there! I totally get what you're going for—those inset text shadows look sleek, but here's the thing: React Native's built-in textShadowColor, textShadowOffset, and textShadowRadius properties only handle drop shadows (shadows outside the text), not inset ones. That's why your current setup isn't giving you the effect you want from the CSS example.

Luckily, there are two solid workarounds to pull off inset text shadows in Expo:

Method 1: Use SVG (Recommended) #

SVG has native support for text filters, including inset shadows, and Expo plays nicely with SVG via the react-native-svg library. Here's how to implement it:

Step 1: Install the dependency #

First, add the SVG package to your Expo project:

expo install react-native-svg

Step 2: Create a reusable inset shadow text component #

import { View } from 'react-native';
import Svg, { Text, Defs, Filter, FeFlood, FeComposite, FeOffset, FeGaussianBlur } from 'react-native-svg';

const InsetShadowText = ({ text, fontSize = 24, textColor = '#ffffff', shadowColor = '#888888', shadowOffset = { x: -1, y: 1 }, blurRadius = 2 }) => {
  return (
    <View>
      <Svg height={fontSize + 10} width="100%">
        <Defs>
          {/* Define the inset shadow filter */}
          <Filter id="textInsetShadow">
            {/* Create a layer of the shadow color */}
            <FeFlood floodColor={shadowColor} result="floodLayer" />
            {/* Clip the shadow layer to the shape of the text */}
            <FeComposite in="floodLayer" in2="SourceAlpha" operator="in" result="clippedShadow" />
            {/* Offset the shadow to mimic inset direction */}
            <FeOffset dx={shadowOffset.x} dy={shadowOffset.y} result="offsetShadow" />
            {/* Blur the shadow for a soft effect */}
            <FeGaussianBlur stdDeviation={blurRadius} result="blurredShadow" />
            {/* Combine the blurred shadow with the original text */}
            <FeComposite in="SourceGraphic" in2="blurredShadow" operator="over" />
          </Filter>
        </Defs>
        {/* Render the text with the inset shadow filter */}
        <Text
          x="0"
          y={fontSize}
          fontSize={fontSize}
          fill={textColor}
          filter="url(#textInsetShadow)"
          textAnchor="start"
        >
          {text}
        </Text>
      </Svg>
    </View>
  );
};

// Example usage
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000000' }}>
      <InsetShadowText 
        text="Inset Shadow Text" 
        fontSize={32} 
        textColor="#000" 
        shadowColor="#ccc" 
        shadowOffset={{ x: -1, y: 1 }} 
        blurRadius={3} 
      />
    </View>
  );
}

This filter works by creating a shadow layer clipped to the text's shape, offsetting it inward, blurring it, and then combining it with the original text—exactly the inset effect you're aiming for.

Method 2: Layered Text Hack (For Solid Backgrounds) #

If you don't want to use SVG, you can fake an inset shadow by stacking two text layers. This only works if your text is on a solid background color:

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

const InsetShadowText = ({ text, style }) => {
  return (
    <View style={styles.container}>
      {/* Shadow layer: Transparent text with a dark shadow */}
      <Text style={[styles.shadowLayer, style]}>{text}</Text>
      {/* Foreground layer: Opaque text with background color to mask outer shadow */}
      <Text style={[styles.foregroundLayer, style]}>{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  shadowLayer: {
    position: 'absolute',
    color: 'transparent',
    textShadowColor: '#666',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 4,
  },
  foregroundLayer: {
    // Match this to your container's background color to hide outer shadow
    backgroundColor: '#000',
    overflow: 'hidden',
  },
});

// Example usage
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }}>
  <InsetShadowText text="Fake Inset Shadow" style={{ fontSize: 32, color: '#fff' }} />
</View>

This trick works because the foreground text's background masks the outer parts of the shadow, leaving only the inner portion visible. Note that it's less flexible than the SVG method (especially if you have a non-solid background).

Key Takeaway #

React Native's text shadow properties don't support inset natively, but SVG is the most reliable way to replicate the CSS inset shadow effect in Expo. The layered text hack is a quick fix for simple solid-background scenarios.

内容的提问来源于stack exchange，提问作者Louis Lecocq