Я вижу, что кто-то сделал это для этого: https://github.com/brentvatne/react-native-linear-gradient
Но есть ли поддержка в самом RN? Что-то вроде
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
Не сейчас. Вы должны использовать связанную вами библиотеку; недавно они добавили поддержку Android, и это один из основных участников реагирования.
Вы можете попробовать этот код 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.
Это пошаговое руководство, позволяющее вам создать собственный компонент, соединив быстрый и 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/
Вот хороший выбор для градиентов для платформ iOS и Android:
https://github.com/react-native-community/react-native-linear-gradient
Существуют и другие подходы, такие как expo, однако реакция-нативный-линейный градиент работает лучше для меня.