Penguasa Gradien Linear React Native: Tampilan yang Indah pada 2026

Kamu mungkin pernah mengalami dua situasi.

Entah layar kamu terlihat datar dan tidak selesai, dan kamu ingin latar belakang atau tombol yang terasa seperti produk asli bukanlah kerangka. Atau kamu sudah mencoba menambahkan gradien React Native, dan sekarang kamu terjebak dalam kebingungan pengaturan karena setengah contoh menggunakan Expo dan setengahnya mengasumsikan proyek native yang sederhana.

Perpisahan itu adalah titik di mana kebanyakan tutorial berhenti bermanfaat. Komponen API sederhana. Pilihan lingkungan bukanlah. Pengaturan gradien linear React Native yang bersih bergantung kurang pada colors prop dan lebih banyak tentang apakah Anda berada di aliran kerja Expo yang diatur atau berurusan dengan penautan native, pods, dan mock tes sendiri.

Tabel Konten

• Mengapa Aplikasi React Native Anda Memerlukan Gradien
  • Apa yang dapat dilakukan gradien dengan baik
• Memilih Jalur Anda Expo vs Pengaturan React Native yang Tidak Berpakaian
  • Pengaturan Expo
  • Pengaturan React Native yang Tidak Berpakaian
  • Di mana proyek yang tidak berpakaian biasanya gagal
• Teknik Gradien Utama untuk Element UI
  • Gradien latar belakang layar penuh
  • Tombol gradien yang masih berperilaku seperti tombol
  • Teks gradien dengan masker
• Membawa Gradien ke Hidup dengan Animasi
  • Loader yang berkilau seperti asli
  • Komponen yang di animasi
• Kinerja, Aksesibilitas, dan Kekacauan Platform
  • Daftar Kinerja
  • Daftar Aksesibilitas
  • Daftar Kekacauan Platform
• Memecahkan Masalah dan Praktik Terbaik Terakhir
  • Gradien tidak muncul
  • Build iOS gagal setelah instalasi
  • Uji coba gagal dengan kesalahan modul native

Mengapa Aplikasi React Native Anda Membutuhkan Gradien

A banyak UI mobile gagal karena alasan yang sama. Tata letaknya baik, jaraknya baik, tipografiannya dapat diterima, tapi layar masih terasa mati. Warna solid membuat segalanya terlihat seperti tempat sampah kecuali sistem visual lainnya melakukan banyak pekerjaan.

A linear gradient React Native komponen ini memperbaiki masalah dengan sedikit code. Ia menambahkan kedalaman, membuat pemisahan antara bagian-bagian, dan memberikan elemen prioritas tinggi berat visual yang jelas. Latar belakang gradient yang baik dapat membuat layar login terasa sengaja. Tombol gradient yang baik dapat membuat aksi utama jelas tanpa harus menggunakan bayangan berat atau batas yang terlalu keras.

Dengan 2019, expo-linear-gradient dan react-native-linear-gradient muncul di lebih dari 42% proyek React Native, yang merupakan tanda kuat bahwa gradient bukanlah efek niche lagi. Mereka adalah alat UI standar dalam aplikasi produksi, bukan dekorasi yang dipasang di akhir, seperti yang disebutkan dalam tulisan tentang penggunaan gradient React Native.

Apa yang dilakukan gradient dengan baik

• Buat kedalaman: Layar dengan latar belakang datar sering terlihat tidak selesai. Blending halus dari atas ke bawah membuat permukaan terasa berlapis.
• Arahkan perhatian: Elemen-utama CTAs, kartu onboarding, dan judul hero menonjol tanpa menambahkan kebisingan visual.
• Ganti aset gambar: Dalam banyak kasus, gradasi memberikan Anda kesan yang lebih rapi tanpa mengirimkan gambar latar belakang tambahan.

Aturan praktis: Gunakan gradasi di mana hierarki penting. Latar belakang, kartu hero, permukaan CTA, dan overlay media mendapatkan manfaat terbesar. Bidang formulir, daftar padat, dan kontainer teks biasanya tidak.

Terdapat juga sudut desain produk di sini. Tim yang bekerja di berbagai platform sudah menghabiskan waktu untuk mencoba menjaga antarmuka konsisten. Jika itu bagian dari stack Anda, praktik UI dan UX lintas platform untuk aplikasi seluler ini berbaris dengan berpikir yang sama: aset yang lebih sedikit, permukaan yang lebih dapat digunakan kembali, dan sistem visual yang dapat bertahan di berbagai layar. Memilih Jalur Anda Expo vs Bare React Native Setup

Ini adalah cabang yang menyebabkan sebagian besar kesulitan. Rendering __CAPGO_KEEP_0__ terasa hampir identik di kedua library, tetapi pengaturan tidak.

This is the fork that causes most of the pain. The rendering API feels almost identical in both libraries, but setup isn’t.

. Jika Anda berada di aplikasi React Native yang sederhana, gunakan expo-linear-gradientPilih Jalur Anda Expo vs Bare React Native Setup react-native-linear-gradient. Jangan mencoba memudar garis-garis tersebut kecuali Anda tahu pasti mengapa Anda melakukannya.

Pengaturan Expo

Expo adalah jalur yang lebih halus. Instalasi mudah, versi yang sesuai diatur untuk Anda, dan Anda tidak perlu berpikir tentang penautan native.

Pasang seperti ini:

npx expo install expo-linear-gradient

Gunakan seperti ini:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1d4ed8']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Expo adalah pilihan yang tepat ketika Anda ingin setup yang cepat, default yang rasional, dan sedikit sisi native yang kasar. Itulah juga mengapa tim yang menjelajahi workflow Expo yang canggih seringnya menggunakan Klien pengembangan Expo untuk kemampuan native yang disesuaikan hanya ketika jalur yang diatur tidak lagi mencakup kebutuhan aplikasi.

Pengaturan React Native yang tidak berpakaian

React Native yang tidak berpakaian memberikan akses langsung ke modul native, tetapi Anda yang menghadapi sisi kasar.

Pasang paket:

npm install react-native-linear-gradient

Untuk iOS, instal pods:

cd ios && pod install

Penggunaan dasar:

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#111827', '#7c3aed']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Di mana proyek sederhana biasanya gagal

Kartu yang hilang dalam tutorial kebanyakan adalah pengujian dan pengaturan native. Menurut ringkasan diskusi Stack Overflow ini, 68% dari thread Stack Overflow pada topik ini pada tahun 2024 hingga 2025 melibatkan gagalnya modul native dalam pengaturan React Native yang sederhana, dan sumber yang sama mencatat masalah yang berulang dengan mocking Jest dan konflik CocoaPods iOS.

Jika Anda menggunakan Jest di aplikasi sederhana, tambahkan mock secara eksplisit:

// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';

jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);

Dan rujuk file pengaturan tersebut dalam konfigurasi Jest Anda:

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
};

React Native yang tidak berpods bekerja dengan baik untuk gradient. Tapi tidak mengampuni setup yang tidak lengkap. Banyak gagal bukanlah bug visual. Mereka adalah masalah tautan, pods, atau masalah lingkungan pengujian.

Tabel keputusan praktis:

Teknik Gradien Dasar untuk Komponen UI

Sangat umum untuk menggunakan set kecil gradient yang sama secara berulang-ulang. Latar belakang. Tombol. Judul. Jika ketiga hal tersebut solid, Anda dapat menggunakannya di banyak layar.

Model mental yang berguna adalah ini:

• colors menentukan palet
• start dan end menentukan arah kontrol
• locations menentukan di mana transisi terjadi

Jika layar masuk atau layar onboarding Anda menggunakan gradasi, maka hal itu akan berpasangan dengan pola startup yang lebih luas yang dijelaskan dalam panduan layar masuk React Native ini Gradien latar belakang layar penuh.

Hal ini adalah pola yang paling sederhana dan paling dapat digunakan kembali.

Blend diagonal biasanya terasa lebih dinamis daripada gradasi vertikal default. Itulah mengapa

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';

export default function WelcomeScreen() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1e293b', '#2563eb']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Welcome back</Text>
        <Text style={styles.subtitle}>Your workspace is ready.</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 8,
  },
  subtitle: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 16,
  },
});

dan start={{ x: 0, y: 0 }} adalah pilihan default yang baik ketika layar hampir saja dekoratif. end={{ x: 1, y: 1 }} __CAPGO_KEEP_0__

Jangan memilih warna secara isolasi. Uji mereka di balik teks nyata, ikon, dan gaya status bar. Sebuah palet yang terlihat bagus di Figma dapat gagal secara instan ketika konten ditempatkan di atasnya.

Batu tombol gradasi yang masih berperilaku seperti tombol.

Kesalahan umum di sini adalah memasang perilaku sentuh langsung pada gradasi dan melupakan tentang keadaan tidak aktif, feedback tekan, atau konsistensi padding. Biarkan tombol memiliki makna semantis dan biarkan gradasi menjadi lapisan visual.

import React from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

export function GradientButton({
  title,
  onPress,
  disabled = false,
  style,
}: Props) {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={style}>
      {({ pressed }) => (
        <LinearGradient
          colors={
            disabled
              ? ['#94a3b8', '#94a3b8']
              : pressed
              ? ['#7c3aed', '#2563eb']
              : ['#8b5cf6', '#3b82f6']
          }
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.button}
        >
          <Text style={styles.label}>{title}</Text>
        </LinearGradient>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 52,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  label: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});

Untuk tombol, gradasi horizontal seringkali lebih mudah dibaca daripada gradasi diagonal. Ini menjaga label stabil dan menghindari membuat kontrol terlihat miring.

Teks gradasi dengan masker.

Pola ini paling berkilau di set, dan itu berguna ketika Anda menjaganya. Judul hero, banner upgrade, dan judul kosong adalah kandidat yang baik. Teks paragraf bukanlah.

Anda memerlukan @react-native-masked-view/masked-view.

npm install @react-native-masked-view/masked-view

Kemudian bangun masker teks:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

export default function GradientHeadline() {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskWrapper}>
            <Text style={styles.title}>Premium analytics</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#22c55e', '#06b6d4', '#3b82f6']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          locations={[0, 0.5, 1]}
        >
          <Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
        </LinearGradient>
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  maskWrapper: {
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    fontWeight: '800',
    letterSpacing: -1,
  },
  hiddenText: {
    opacity: 0,
  },
});

locations Hal yang paling penting ketika Anda ingin warna satu mengisi ruang visual lebih banyak daripada warna lainnya. Jika campuran terasa kotor, kurangi jumlah warna terlebih dahulu. Biasanya itu memperbaiki desain lebih cepat daripada menyesuaikan setiap stop.

Membawa Gradien ke Hidup dengan Animasi

Gradien statis memberikan Anda kesan yang rapi. Gradien animasi memberikan Anda feedback.

Penggunaan yang paling praktis bukanlah latar belakang yang berkilau. Ini adalah loader yang berkilau. Efek itu memberitahu pengguna bahwa aplikasi aktif, data sedang datang, dan tata letak yang mereka lihat sengaja bukanlah rusak.

Komponen shimmer juga melengkapi pola gerakan lainnya. Jika aplikasi Anda sudah menggunakan ikon animasi atau loader, ini Petunjuk Lottie di React Native bermanfaat untuk menentukan kapan shimmer gradient cukup dan kapan aset animasi yang lebih kaya lebih tepat.

Loader shimmer yang terasa native

Versi yang paling sederhana dan dapat diandalkan menggunakan react-native-reanimated untuk memindahkan band gradient ke atas tempat penampungan yang dipotong.

Pasang Reanimated jika belum ada di aplikasi Anda, kemudian buat wrapper dengan overflow: 'hidden'. Di dalamnya, animasikan layer gradient dari kiri ke kanan.

import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

type Props = {
  width?: number | string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
};

export function ShimmerPlaceholder({
  width = '100%',
  height = 16,
  borderRadius = 8,
  style,
}: Props) {
  const translateX = useSharedValue(-220);

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(220, {
        duration: 1200,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [translateX]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View
      style={[
        styles.container,
        { width, height, borderRadius },
        style,
      ]}
    >
      <AnimatedView style={[styles.shimmer, animatedStyle]}>
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.gradient}
        />
      </AnimatedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e5e7eb',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    width: 220,
  },
  gradient: {
    flex: 1,
  },
});

Yang membuat ini berfungsi adalah Anda tidak mencoba menganimasikan definisi gradient itu sendiri. Anda menganimasikan layer gradient ke atas tempat penampungan statis. Itu lebih sederhana, lebih mudah dipahami, dan biasanya lebih stabil di berbagai perangkat.

Berikut adalah walkthrough visual efek dalam prakteknya:

Komponen yang dianimasikan

Apa yang perlu diperhatikan dalam implementasi:

• Pakai clipping: Orang tua memerlukan overflow: 'hidden', atau efek shimmer akan keluar dari sudut yang melengkung.
• Tetapkan lebar band sempit: Lapisan animasi yang lebih kecil lebih mudah diatur daripada menganimasi permukaan seluruhnya.
• Warna dasar harus sesuai dengan layar: Pemuatan kerangka tulang harus sesuai dengan tata letak sekitar, bukan terlihat seperti widget yang terpisah.

Gradien yang dianimasikan bekerja terbaik ketika pengguna hampir tidak menyadarinya. Jika efek shimmer menjadi hal yang paling keras di layar, maka sudah terlalu banyak.

Kinerja, Aksesibilitas, dan Kekacauan Platform

Setelah gradien bergerak dari layar demo ke layar produksi, kekhawatiran berubah. code masih terlihat sederhana, tapi perilaku rendering, ketepatan bacaan, dan konsistensi platform mulai lebih penting daripada efek awal.

Jika Anda memperketat responsifitas aplikasi secara lebih luas, hal ini Petunjuk Optimasi Kinerja Aplikasi Seluler Memiliki mindset yang sama: mengurangi pekerjaan yang tidak perlu, mengukur pada perangkat nyata, dan mengoptimalkan permukaan yang paling sering dilihat pengguna.

Daftar Periksa Kinerja

Gradien native secara umum efisien, tetapi Anda masih bisa salah menggunakannya.

• Gunakan gradien daripada gambar dekoratif besar: Mereka sering lebih bersih untuk dikirim dan lebih mudah untuk disesuaikan dengan ukuran layar yang berbeda.
• Hindari menumpuk banyak layer layar penuh: Satu gradien latar belakang cukup. Beberapa gradien transparan yang berlapis plus efek bayangan plus animasi berat bisa mahal.
• Memois komponen yang dapat digunakan kembali: Jika kartu gradien digunakan dalam daftar, jaga properti stabil dan hindari merender ulang untuk keadaan induk yang tidak terkait.

Satu aturan yang baik adalah menjaga gradien struktural, bukan berlebihan. Gunakan mereka untuk mendefinisikan permukaan, bukan setiap baris dalam feed yang padat.

Daftar Periksa Aksesibilitas

Gradien dapat merusak ketepatan bacaan dengan cepat karena perubahan kontras di seluruh permukaan.

• Uji teks melawan area yang paling terang: Jika teks putih hanya berfungsi di sisi gelap dari campuran, maka itu tidak berfungsi.
• Tambahkan scrim jika diperlukan: Overlaid gelap yang halus antara latar belakang dan teks seringkali lebih baik daripada mengubah seluruh palet.
• Simpan teks gradien untuk kopi besar tampilan: Terlihat baik pada judul. Pilihan yang buruk untuk label kecil, teks bantuan, atau apa pun yang kritis untuk menyelesaikan tugas.

Periksa titik yang paling buruk pada gradien, bukan yang paling cantik.

Daftar checklist kebiasaan platform

iOS dan Android biasanya menampilkan gradien yang sama dengan sangat dekat, tetapi tidak selalu sempurna.

Juga perhatikan status bar dan penanganan area aman. Sebuah gradient yang terlihat seimbang di simulator dapat terasa berat di atas perangkat dengan notch jika konten dan latar belakang tidak mempertimbangkan ruang tambahan tersebut.

Pengaturan dan Praktik Terbaik Terakhir

Berikut adalah versi singkat yang saya simpan di catatan proyek.

• Sesuaikan perpustakaan dengan alur kerja: expo-linear-gradient untuk aplikasi Expo yang diatur react-native-linear-gradient untuk React Native yang tidak diatur
• Tetapkan gradasi dengan sengaja: Latar belakang, tombol, overlay, dan teks hero adalah kasus penggunaan yang kuat.
• Kontrol arah dengan sengaja: Horizontal untuk tombol, diagonal untuk latar belakang dekoratif, hanya tersembunyi untuk teks besar.
• Desain untuk konten, bukan keadaan kosong: Uji dengan salinan nyata, ikon, dan penanganan status bar.
• Tangani setup yang tidak berpakaian sebagai setup asli: Pods, penghubung, dan mock Jest bukanlah detail yang opsional.

Tiga kegagalan yang umum muncul secara berulang.

Gradasi tidak muncul

Penyebab: komponen ini tidak memiliki ukuran yang dapat dilihat.

Perbaiki: berikan tinggi flex: 1, atau induk dengan dimensi.

Gradien tanpa box layout tidak akan menampilkan dalam cara yang bermakna.

iOS build gagal setelah instalasi

Penyebab: pods tidak terinstal atau grafik dependensi native tidak sinkron. pod install Perbaiki: jalankan iosbersihkan folder build jika perlu, kemudian bangun kembali aplikasi.

Dalam proyek tanpa bungkus, instal paket sendiri biasanya tidak cukup.

Tes gagal dengan kesalahan modul native

Penyebab: Jest mencoba memuat modul native yang sebenarnya. react-native-linear-gradient Perbaiki: mock react-native-linear-gradient/jest/linear-gradient-mock dalam file pengaturan Jest Anda.

Jika Anda hanya mengingat satu gagasan dari panduan ini, ingatlah ini: gradient itu sendiri mudah. Pengaturan siap produksi adalah upaya utama. Setelah Anda memilih library yang tepat untuk arsitektur aplikasi Anda, segalanya setelah itu menjadi lebih dapat diprediksi.

Jika tim Anda mengirimkan aplikasi hybrid mobile dan ingin memperbarui JavaScript, CSS, salinan, konfigurasi, dan aset tanpa menunggu tinjauan toko, Capgo mungkin layak dilihat. Ini memberikan tim CapacitorJS dan Electron pembaruan hidup yang dikendalikan, saluran peluncuran, perlindungan rollback, dan visibilitas rilis tanpa mengubah proses pengiriman Anda menjadi kotak hitam.