Aku melihat seseorang yang membuat ini untuk itu: https://github.com/brentvatne/react-native-linear-gradient
Tapi apakah ada dukungan untuk itu dalam RN itu sendiri? Sesuatu seperti
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
U bisa coba ini kode 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>
);
}
}
Mencari solusi yang sama aku hanya datang di ini baru tutorial yang memungkinkan anda jembatan Swift latar belakang gradien (https://github.com/soffes/GradientView) perpustakaan sambil berjalan melalui setiap langkah untuk mendapatkan kerja yang Bereaksi komponen.
Ini adalah langkah-demi-langkah tutorial, memungkinkan anda untuk membangun anda sendiri komponen dengan menjembatani swift dan objective-c komponen menjadi bermanfaat Bereaksi Asli komponen, yang menimpa Tampilan standar komponen dan memungkinkan anda untuk menentukan gradien seperti berikut:
<LinearGradient
style={styles.gradient}
locations={[0, 1.0]}
colors={['#5ED2A0', '#339CB1']}
/>
Anda dapat menemukan tutorial di sini: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/
Berikut ini adalah pilihan yang baik untuk gradien untuk kedua platform iOS dan Android:
https://github.com/react-native-community/react-native-linear-gradient
Ada pendekatan lain-lain seperti expo, namun bereaksi-asli-linear-gradient telah bekerja baik untuk saya.