我看到有人为它做了这个: https://github.com/brentvatne/react-native-linear-gradient
但 RN 本身支持吗?比如
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
你可以试试这个 JS 代码 https://snack.expo.io/r1v0LwZFb
import React, { Component } from 'react';
import { View } from 'react-native';
export default class App extends Component {
render() {
const gradientHeight=500;
const gradientBackground = 'purple';
const data = Array.from({ length: gradientHeight });
return (
<View style={{flex:1}}>
{data.map((_, i) => (
<View
key={i}
style={{
position: 'absolute',
backgroundColor: gradientBackground,
height: 1,
bottom: (gradientHeight - i),
right: 0,
left: 0,
zIndex: 2,
opacity: (1 / gradientHeight) * (i + 1)
}}
/>
))}
</View>
);
}
}
在寻找类似解决方案的过程中,我看到了这篇全新的教程,它可以让你桥接 Swift 梯度背景 (https://github.com/soffes/GradientView) 库,同时指导你如何通过每一个步骤来获得一个可用的 React 组件。
这是一个循序渐进的教程,让你可以通过桥接 Swift 和 objective-c 组件来构建自己的组件,并将其转化为可用的 React Native 组件,它可以覆盖标准的 View 组件,并允许你像下面这样定义渐变:
<LinearGradient
style={styles.gradient}
locations={[0, 1.0]}
colors={['#5ED2A0', '#339CB1']}
/>
您可以在此处找到该教程:http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/