React 本机样式支持渐变吗？

Not at the moment. You should use the library you linked; they recently added Android support and it is by one of the main contributors of react-native.

Looking for a similar solution I just came across this brand new tutorial, which lets you bridge a Swift gradient background (https://github.com/soffes/GradientView) library while walking through every step to get a working React component.

It is a step-by-step tutorial, allowing you to build your own component by bridging the swift and objective-c component into a usable React Native component, which overrides the standard View component and allows you to define a gradient like the following:

 <LinearGradient
style={styles.gradient}
locations={[0, 1.0]}
colors={['#5ED2A0', '#339CB1']}
/>

You can find the tutorial here: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Here is a good choice for gradients for both platforms iOS and Android:

https://github.com/react-native-community/react-native-linear-gradient

There are others approaches like expo, however react-native-linear-gradient have worked better for me.

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>


// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});

First, run npm install expo-linear-gradient --save

You don't need to use an animated tag, but this is what I was using in my code.

inside colors={[ put your gradient colors ]}

then you can use something like this:

 import { LinearGradient } from "expo-linear-gradient";
import { Animated } from "react-native";


<AnimatedLinearGradient
colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
style=\{\{ your styles go here }}/>


const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

Here is a production ready pure JavaScript solution:

<View styles=\{\{backgroundColor: `the main color you want`}}>
<Image source={`A white to transparent gradient png`}>
</View>

Here is the source code of a npm package using this solution: https://github.com/flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329

Here is the gradient palette screenshot of saturation and brightness using this npm package: https://github.com/flyskywhy/react-native-slider-color-picker

React Native hasn't provided the gradient color yet. But still, you can do it with a NPM package called react-native-linear-gradient or you can click here for more info

1. npm install react-native-linear-gradient --save

2. use import LinearGradient from 'react-native-linear-gradient'; in your application file

3. <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient> 

Just export your gradient as SVG and use it using react-native-svg and when after you import your component set width and height and preserveAspectRatio="xMinYMin slice"to scale an SVG gradient at your needs.

EXPO? Well, use this method Linear Gradient in React Native using EXPO. (Updated Nov. 2021)

No Pod Installs, No Errors, No additional linked files.

expo install expo-linear-gradient

Then

import { LinearGradient } from 'expo-linear-gradient';


<View style={styles.container}>
<LinearGradient
// Background Linear Gradient
colors={['rgba(0,0,0,0.8)', 'transparent']}
style={styles.background}
/>
<LinearGradient
// Button Linear Gradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.button}>
<Text style={styles.text}>Sign in with Facebook</Text>
</LinearGradient>
</View>

Full Link here: https://docs.expo.dev/versions/latest/sdk/linear-gradient/

Yes React Native Support Gradient Use react-native-linear-gradient library.

A little late to the party but the best solution IMO is using SVG gradient with react-native-svg which is included in most projects.

Here is a few lines versatile component that I use whenever I need a gradient:

Simple SVG Linear Gradient Component

import { View, StyleSheet, ViewProps } from 'react-native'
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'


type GradientProps = { fromColor: string, toColor: string, children?: any, height?: number | string, opacityColor1?: number, opacityColor2?: number } & ViewProps


function Gradient({ children, fromColor, toColor, height = '100%', opacityColor1 = 1, opacityColor2 = 1, ...otherViewProps }: GradientProps) {
const gradientUniqueId = `grad${fromColor}+${toColor}`.replace(/[^a-zA-Z0-9 ]/g, '')
return <>
<View style={[{ ...StyleSheet.absoluteFillObject, height, zIndex: -1, top: 0, left: 0 }, otherViewProps.style]} {...otherViewProps}>
<Svg height='100%' width="100%" style={StyleSheet.absoluteFillObject}>
<Defs>
<LinearGradient id={gradientUniqueId} x1="0%" y1="0%" x2="0%" y2="100%">
<Stop offset="0" stopColor={fromColor} stopOpacity={opacityColor1} />
<Stop offset="1" stopColor={toColor} stopOpacity={opacityColor2} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
</Svg>
</View>
{children}
</>
};


export default Gradient

See those example usages on snack