Expo环境下React Native实现Neumorphism风格遇问题求助

解决Expo React Native应用新拟态（Neumorphism）实现问题的方案 #

方案1：修复react-native-neumorphic的阴影显示问题 #

1. 确保正确安装并配置expo-linear-gradient：

   npx expo install expo-linear-gradient
   

2. 检查库是否支持传入自定义渐变组件，若支持则在使用时显式传递Expo的LinearGradient：

   import { LinearGradient } from 'expo-linear-gradient';
   import { NeuView } from 'react-native-neumorphic';
   
   <NeuView 
     LinearGradientComponent={LinearGradient}
     style={{ width: 150, height: 150, borderRadius: 24 }}
     lightColor="#ffffff"
     darkColor="#a3b1c6"
     backgroundColor="#e0e5ec"
   >
     {/* 子内容组件 */}
   </NeuView>
   

3. 清除Expo缓存并重启服务，避免缓存导致的渲染异常：

   npx expo start -c
   

方案2：手动封装跨平台新拟态组件（完全适配Expo） #

如果第三方库适配困难，自己封装更可控，核心是通过双阴影层模拟新拟态效果：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const NeuContainer = ({ 
  children, 
  style, 
  isPressed = false, 
  baseColor = '#e0e5ec' 
}) => {
  const borderRadius = style?.borderRadius || 20;

  return (
    <View style={[styles.wrapper, style]}>
      {/* 高光阴影层 */}
      <View
        style={[
          styles.shadowLayer,
          {
            borderRadius,
            shadowColor: '#ffffff',
            shadowOffset: isPressed ? { width: -3, height: -3 } : { width: 3, height: 3 },
            shadowOpacity: 0.8,
            shadowRadius: 6,
            elevation: isPressed ? 0 : 3,
          },
        ]}
      />
      {/* 深色阴影层 */}
      <View
        style={[
          styles.shadowLayer,
          {
            borderRadius,
            shadowColor: '#a3b1c6',
            shadowOffset: isPressed ? { width: 3, height: 3 } : { width: -3, height: -3 },
            shadowOpacity: 0.5,
            shadowRadius: 6,
            elevation: isPressed ? 3 : 0,
          },
        ]}
      />
      {/* 内容容器，支持渐变背景 */}
      <LinearGradient
        colors={[baseColor, baseColor]}
        style={[styles.content, { borderRadius }, style]}
      >
        {children}
      </LinearGradient>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    position: 'relative',
  },
  shadowLayer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  content: {
    position: 'relative',
    zIndex: 1,
    padding: 16,
  },
});

export default NeuContainer;

使用示例：

<NeuContainer style={{ width: 200, height: 200, borderRadius: 24 }}>
  {/* 子组件 */}
</NeuContainer>

<NeuContainer isPressed={true} style={{ width: 200, height: 200, borderRadius: 24 }}>
  {/* 按压状态的子组件 */}
</NeuContainer>

方案3：版本兼容性检查 #

确认react-native-neumorphic版本与当前Expo SDK版本匹配，部分旧版本库对新Expo SDK支持不佳，可尝试升级或降级库版本。

内容的提问来源于stack exchange，提问作者michal-kow