将 LinearGradient 用于 web 会出错，找不到导出"requireNativeComponent"(导入为"requireNativeComponent")

Question

我在一个web项目中使用了React Native组件LinearGradient

<LinearGradient colors={['rgba(0,0,0,0.7)', 'rgba(0,0,0,0)']}>
<View />
</LinearGradient>

这会产生错误

Using LinearGradient for web gives error export 'requireNativeComponent' (imported as 'requireNativeComponent') was not found in 'react-native-web/dist/index'

问题可能是什么?如何解决?

Answer 1

线性梯度是React Native的属性之一react native只是一个移动应用开发平台。如果你想使用渐变颜色网站意味着你必须设置背景颜色对于父组件，

.grad {
background-image: linear-gradient(red, yellow);
}

<div class="grad"> parent>
<div> child</div>
</div>

Answer 2

问题似乎是React Native组件<LinearGradient />不适合web。解决方案之一是使用<WebLinearGradient>代替:

<WebLinearGradient colors={['rgba(0,0,0,0.7)', 'rgba(0,0,0,0)']}>
<View />
</WebLinearGradient>

更动态和通用的解决方案可能是这样的:

import { Platform } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import WebLinearGradient from 'react-native-web-linear-gradient';
const MyGradient = Platform.OS === 'web' ? WebLinearGradient : LinearGradient;
// Use MyGradient in your component