< React Native

React Native - Színátmenet

Szerző: Sallai András

Copyright © 2024, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Telepítés

npx expo install expo-linear-gradient

vagy:

yarn add react-native-linear-gradient

vagy:

npm install react-native-linear-gradient

Használat

import LinearGradient from 'react-native-linear-gradient'; <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}> <Text style={styles.buttonText}> Belépés </Text> </LinearGradient> 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', }, });

Másik példa

import { LinearGradient } from 'expo-linear-gradient'; import { StatusBar } from 'expo-status-bar'; import { ImageBackground, StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <LinearGradient // Background Linear Gradient colors={['#ff8a00', '#e52d27']} style={styles.background} /> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, background: { position: 'absolute', left: 0, right: 0, top: 0, height: '100%', }, });

Linkek

https://docs.expo.dev/versions/latest/sdk/linear-gradient/ (2024)

https://github.com/react-native-linear-gradient/react-native-linear-gradient (2024)

https://www.npmjs.com/package/react-native-linear-gradient?activeTab=readme (2024)

https://www.npmjs.com/package/react-native-gradients (2024)