如何使用 Expo 在 React Native 中创建 Neumorphism 风格？

Question

我正在尝试以同态风格制作我的 React Native 应用程序。我正在使用世博会。首先，我尝试做的是在没有任何第三方库的情况下实现这种风格，但由于 Android 几乎只支持 elevation 属性，所以我放弃了这个想法。我发现了几个用于 React Native 的新态包，但这些似乎都不适合我。

• react-native-neomorph-shadows - 不支持博览会
• neumorphism-ui - 不支持Android
• react-native-neu-element - React-native-线性梯度存在一些问题
• rn-neumorphism - 老实说不记得出了什么问题

现在我正在尝试使用react-native-neumorphic，因为它应该支持expo。但我遇到了这个错误，并且在任何地方都找不到解决方案：

ERROR  Invariant Violation: requireNativeComponent: "DropShadow" was not found in the UIManager.

如果有人知道导致问题的原因，或者是否有不同的包或方法在 rn 和 expo 中使用此样式，请告诉我。谢谢！

Answer 1

这里是使用 Expo 在 React Native 中创建 Neumorphism 风格的代码：

import React from 'react';
import { View } from 'react-native';
import { Neumorphic } from 'react-native-neumorphic';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Neumorphic
        inner
        darkShadowColor="#1A1A1A"
        lightShadowColor="#363636"
        containerStyle={{
          width: 150,
          height: 150,
          borderRadius: 75,
        }}
      >
        {/* Your content here */}
      </Neumorphic>
    </View>
  );
};

export default App;

通过运行以下命令确保您已安装

react-native-neumorphic

软件包：

npm install react-native-neumorphic --save

此外，请务必查看文档并根据需要自定义代码，以便为您的 React Native 应用程序实现所需的 Neumorphism 风格。