Давайте добавим цветов в наше приложение…

Градиенты добавляют современный вид вашим мобильным приложениям, особенно фонам кнопок.

Чтобы добавить это, мы будем использовать react-native-linear-gradient, потому что он полностью разработан для градиентов, легкий и позволяет использовать эффекты градиента как сверху-снизу, так и слева-направо. Pod 'BVLinearGradient',: путь = › '../node_modules/react-native-linear-gradient'

Для установки библиотеки запустите

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

и для iOS:

$ cd ios && pod install && cd ..

поскольку он устанавливает все зависимости модулей в ваш проект, обязательно перезапустите упаковщик после внесения любых изменений на нативной стороне.

Теперь приступим к программированию…

импортировать библиотеку в свой файл:

import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
    My Gradient Button
</Text>
</LinearGradient>
...

// 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',
},
});

Приведенный выше код добавит верхний и нижний градиент оттенков синего к тексту в стиле кнопки. Все очень просто: вам нужно просто передать массив цветов, в которых вы хотите использовать градиент.

Это было легко, теперь посмотрим, что мы можем сделать, если нам понадобится левый-правый или наоборот. Для этого LinearGradient дайте нам свойство start и end, где вы можете определить ось.

//in return statement
<TouchableOpacity
style={{height: '100%'}}
activeOpacity={0.9}
onPress={() => console.log('Beep Beep')}
style={ width: 312,
height: '17.5%',
marginBottom: '3%'
}>
<LinearGradient
start={{x: 1, y: 0}} //here we are defined x as start position
end={{x: 0, y: 0}} //here we can define axis but as end position
colors={['#3393E4', '#715886']}
style={{
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
}}>
<Text> Log in </Text>
</LinearGradient>
</TouchableOpacity>

Здесь мы разработали кнопку, поддерживающую реакцию, с эффектом градиента. Вы можете поиграть с осью, чтобы удовлетворить свои желания. Вот результат вышеприведенного кода:

И это конец. Если возникнут трудности, напишите мне. Если вам понравилась статья «Дай пять», я имею в виду «аплодисменты»!