Блог

добавьте линейный градиентный цвет к границе я хочу знать, как использовать в таблице стилей линейный градиент.

  borderColor:['color1',color2]
  

введите описание изображения здесь пожалуйста, проверьте выходное изображение

Давайте начнем с создания новой кнопки:

 <TouchableOpacity 
onPress={() =&&t; {})}
style={styles.buttonContainer}&&t;
<Text style={style.buttonText}&&t;Lo&in</Text&&t;
  

Стили:

  buttonContainer: {
    width: 200,
    ali&nItems: 'center',
},
buttonText: {
    textAli&n: 'center',
    color: '#4C64FF',
    paddin&: 15,
    width: 200
}
  

Начните с установки пакета react-native-linear-&radient

 <LinearGradient
      colors={['#00FFFF', '#17C8FF', '#329BFF', '#4C64FF', '#6536FF', '#8000FF']}
      start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 1.0}}
      style={{ hei&ht: 48, width: 200, ali&nItems: 'center', justifyContent: 'center', width: 200}}
    &&t;
  

для получения дополнительной информации: https://codeburst.io/linear-&radient-for-border-color-in-react-native-5bcab3eea1c9

Чтобы добавить линейный градиент, сначала запустите expo add expo-linear-&radient

Затем, чтобы добавить горизонтальный градиент

  <LinearGradient
            start={[0, 1]}
            end={[1, 0]}
            colors={[color1, color2]}
          /&&t;
  

Для вертикального градиента

  <LinearGradient
            start={[0, 0]}
            end={[0, 1]}
            colors={[color1, color2]}
          /&&t;