Создать градиент с Purechart

Question

Я использую response-native-pure-chart для создания моей статистики, но мне нужно создать внутри нее градиент. Вы можете помочь мне, потому что я не знаю.

Результат, на который я буду надеяться

Answer 1

Ну, это очень общий вопрос, поэтому мой ответ будет немного общим: Чтобы создать эффект градиента, лучше всего подобрать этот пакет:

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

После установки этого пакета вы можете использовать его поверх компонента char. Например:

    import LinearGradient from 'react-native-linear-gradient';

Тогда мы можем иметь:

render() {

        }
        return (
                    <View>
                            <LinearGradient colors={['transparent', 'transparent', '#000000']} locations={[0,0.6,0.9]} style={styles.imageSlideMask}>
                              <Your chart component will be here />
                            </LinearGradient>
                    </View>

        );
      }
    }
const styles = StyleSheet.create({

  imageSlideMask:{
    marginTop:5, 
    width: ((Dimensions.get('window').width)/1.7),
    height:((Dimensions.get('window').height)/2.1),
    flexDirection:'column', 
    justifyContent: 'flex-end', 
    alignItems: 'flex-start', 
    borderRadius:10,
    // shadowOffset:{  width: 0,  height: 2, blur:2, spread:0  },
    // shadowColor: '#000',
    // shadowOpacity: 0.4,
    opacity:0.7
  },



});

Вы также можете добавить тени к своим слоям, раскомментировав shadowOffset, shadowColor и shadowOpacity. Для ширины и высоты вы должны указать постоянный размер или подходящие числа для правильного деления.

Я надеюсь, что смогу помочь. :)