Veo que alguien hizo esto para él: https://github.com/brentvatne/react-native-linear-gradient
Pero, ¿hay soporte para ello en el propio RN? Algo como
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
Puedes probar este código 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>
);
}
}
Buscando una solución similar me acabo de encontrar con este nuevo tutorial, que le permite puentear un fondo de gradiente Swift (https://github.com/soffes/GradientView) biblioteca mientras camina a través de cada paso para obtener un componente React de trabajo.
Es un tutorial paso a paso, lo que le permite construir su propio componente por el puente de la swift y objetivo-c componente en un componente React Native utilizable, que anula el componente estándar de vista y le permite definir un gradiente como el siguiente:
<LinearGradient
style={styles.gradient}
locations={[0, 1.0]}
colors={['#5ED2A0', '#339CB1']}
/>
Puedes encontrar el tutorial aquí: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/