Un component LinearGradient per a React Native

Bloc

Un component LinearGradient per a React Native

Un component LinearGradient per a React Native

react-native-linear-gradient, A component per react-native, tal com es veu a react-native-login .



Afegiu-lo al vostre projecte

Utilitzant Yarn

yarn add react-native-linear-gradient

Utilitzant NPM

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

Passos d’enllaç manuals (React Native<0.60)

Enllaça la biblioteca

react-native link react-native-linear-gradient

Nota: si utilitzeu la versió 0.60 o posterior de react-native, no cal que enllaceu react-native-linear-gradient .

iOS

Per a React Native> = 0.60.0, executeu l'ordre següent a ios/ i ometeu la resta de la secció.



pod install
CocoaPods

Afegiu la línia següent al vostre fitxer Pod:

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

o bé:



De forma manual
  1. Obriu el vostre projecte a Xcode, feu clic dret a Libraries i feu clic a Add Files to 'Your Project Name' Mireu a sota node_modules/react-native-linear-gradient/ios i afegir BVLinearGradient.xcodeproj. (Captura de pantalla 1) (Captura de pantalla 2) .
  2. Afegeix libBVLinearGradient.a a Build Phases -> Link Binary With Libraries (Captura de pantalla 1) (Captura de pantalla 2) .
  3. Feu clic a BVLinearGradient.xcodeproj a Libraries i aneu a Build Settings fitxa. Feu doble clic al text situat a la dreta de Header Search Paths i comproveu que té $(SRCROOT)/../react-native/React - si no ho és, afegiu-lo. Això és així, Xcode pot trobar les capçaleres que el BVLinearGradient Es fa referència als fitxers font assenyalant els fitxers de capçalera instal·lats a react-native node_modules directori. (Captura de pantalla) .

Després:

  • Sempre que el vulgueu fer servir al codi React ara podeu: import LinearGradient from 'react-native-linear-gradient';

Si teniu problemes, podeu apuntar el vostre package.json a GitHub per veure si el problema s'ha solucionat. Simplement canvieu la dependència

'react-native-linear-gradient': 'react-native-community/react-native-linear-gradient',

per obtenir les dades directament des de GitHub en lloc de npm i després npm install

Per exemple, el fitxer podspec no conté les dades adequades (atributs d’autor, etc.) a npm mentre ho fa al repositori de GitHub.

Android

Els passos següents només són necessaris per a React Native<0.60

  1. a android/settings.gradle

    include ':react-native-linear-gradient' project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
  2. a android/app/build.gradle afegir:

    dependencies { ... implementation project(':react-native-linear-gradient') }
  3. i, finalment, a android/app/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java per react-native<0.29, or |_+_| for react-native >= 0,29 afegir:

    android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java

Windows (WPF)

  1. a //... import com.BV.LinearGradient.LinearGradientPackage; // <--- This! //... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new LinearGradientPackage() // <---- and This! ); } Afegeix -> Projecte existent: windows/MyApp.sln

  2. a node_modules/react-native-linear-gradient/windows/LinearGradientWPF/LinearGradientWPF.csproj Afegeix -> Referència -> LinearGradientWPF

    on guardar icx
  3. a windows/MyApp/MyAppWPF/MyAppWPF.csproj afegir: windows/MyApp/MyAppWPF/AppReactPage.cs i

using LinearGradient;

Exemples

simple

El següent codi produirà alguna cosa així:

Resultat de codi d'exemple

public override List Packages => new List { ... new LinearGradientPackage() }

Gradient horitzontal

Utilitzant els estils de dalt, configureu import LinearGradient from 'react-native-linear-gradient'; // Within your render function Sign in with Facebook // 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', }, }); i start així per fer que el degradat vagi d’esquerra a dreta, en lloc de dalt a baix:

dibuixant al generador de la vida real
end

Gradient de text (iOS)

A iOS podeu utilitzar el Sign in with Facebook per mostrar text amb un degradat. El truc aquí és representar el text dues vegades; una vegada per a la màscara i una altra per deixar que el degradat tingui la mida correcta (d’aquí el MaskedViewIOS):

opacity: 0

Accessoris addicionals

A més de regular accessoris, també podeu proporcionar accessoris addicionals per personalitzar el vostre aspecte de degradat:

colors

Una matriu d’almenys dos valors de color que representen colors degradats. Exemple: View defineix el degradat del vermell al blau.

començar

Un objecte opcional del tipus següent: ['red', 'blue']. Les coordenades declaren la posició en què comença el degradat, com una fracció de la mida global del degradat, a partir de la cantonada superior esquerra. Exemple: { x: number, y: number } significa que el degradat començarà un 10% des de la part superior i un 10% des de l’esquerra.

final

Igual que començar, però per al final del gradient.

ubicacions

Una matriu opcional de nombres que defineixen la ubicació de cada parada de color de degradat, assignant-se al color amb el mateix índex a { x: 0.1, y: 0.1 } prop. Exemple: colors significa que el primer color prendrà del 0% al 10%, el segon color prendrà del 10% al 75% i, finalment, el tercer color ocuparà el 75% al ​​100%.

[0.1, 0.75, 1]

Exemple amb accessoris addicionals

useAngle / angle / angleCenter

És possible que vulgueu obtenir un efecte de degradat en angle, similar als dels editors d’imatges com Photoshop. Un dels problemes és que heu de calcular l’angle en funció de la mida de la vista, que només es produeix de forma asíncrona i provocarà un flickr no desitjat.

Per fer-ho correctament, podeu establir Sign in with Facebook , per aconseguir un gradient amb un angle de 45 graus, amb el centre situat al centre exacte de la vista.

{ useAngle: true, angle: 45, angleCenter: { x: 0.5, y: 0.5} } s'utilitza per activar / desactivar el càlcul basat en l'angle (a diferència de useAngle / start). end és l’angle en graus. angle és el punt central de l'angle (controlarà el pes i l'estirament del degradat com fa al photoshop.

Actualització dels valors per diversió

Fes una ullada Exemples / AnimatedGradient (angleCenter aquest projecte, cd-hi, npm install, obriu-lo a Xcode i executeu-lo) per veure com es fa:

Exemple amb accessoris addicionals

Aquest gif es va crear amb licecap - una gran peça d’OSS gratuït

Un exemple d'aplicació

Podeu veure aquest component en acció a brentvatne / react-native-login .

Altres plataformes

Detalls de la descàrrega:

Autor: reacciona-comunitat-nativa

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

# react-native #programming