Reaktywuje style natywne obsługujące gradienty?

Question

Widzę, że ktoś to zrobił: https://github.com/brentvatne/react-native-linear-gradient

Ale czy istnieje wsparcie dla niego w samym RN? Coś w rodzaju:

style = StyleSheet.create({ 
    backgroundGradient: "vertical", 
    backgroundGradientTop: "#333333", 
    backgroundGradientBottom: "#666666" 
}); 

Answer 1

Nie w tej chwili. Powinieneś skorzystać z biblioteki, którą połączyłeś; Niedawno dodali wsparcie dla systemu Android i jest jednym z głównych współpracowników reagujących natywnie.

Answer 2

Poszukując podobnego rozwiązania, natknąłem się na ten zupełnie nowy samouczek, który pozwala połączyć bibliotekę Swift z gradientem tła (https://github.com/soffes/GradientView) podczas przechodzenia przez każdy krok, aby uzyskać działający komponent React.

Jest to samouczek krok po kroku, który pozwala na zbudowanie własnego komponentu poprzez połączenie komponentu swift i cel-c w użytecznym komponencie React Native, który zastępuje standardowy komponent View i pozwala zdefiniować gradient jak następuje:

<LinearGradient 
    style={styles.gradient} 
    locations={[0, 1.0]} 
    colors={['#5ED2A0', '#339CB1']} 
/> 

można znaleźć tutorial tutaj: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

Answer 3

U może spróbować tego kodu 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> 
     ); 
    } 
}