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.

Perpecahan itu adalah titik di mana kebanyakan tutorial berhenti bermanfaat. Komponen API sederhana. Pilihan lingkungan bukanlah. 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 Membutuhkan 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 Komponen 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 animasikan
• Kinerja, Aksesibilitas, dan Kekacauan Platform
  • Daftar Kinerja
  • Daftar Aksesibilitas
  • Daftar Kekacauan Platform
• Mengatasi Masalah dan Praktik Terbaik Terakhir
  • Gradien tidak muncul
  • Pembangunan 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, tipografiya terlihat baik, 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 sangat sedikit code. Ia menambahkan kedalaman, membuat pemisahan antar 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 yang 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 yang eksklusif lagi. Mereka adalah alat tooling UI standar di aplikasi produksi, bukan dekorasi yang dipasang di akhir, seperti yang disebutkan dalam tulisan ini tentang penggunaan gradient React Native.

Apa yang dilakukan gradient dengan baik

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

Aturan praktis: Gunakan gradasi di mana hierarki penting. Latar belakang, kartu hero, permukaan CTA, dan overlay media paling banyak mendapat manfaat. 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 pemikiran 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 React Native Tanpa Bungkus

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 tanpa bungkus, gunakan expo-linear-gradientPilih Jalur Anda Expo vs React Native Tanpa Bungkus react-native-linear-gradient. Jangan mencoba memudahkan garis-garis tersebut kecuali Anda tahu mengapa Anda melakukannya.

Pengaturan Expo

Expo adalah jalur yang lebih halus. Instalasi mudah, versi yang sesuai diatur untuk Anda, dan Anda tidak perlu memikirkan 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 sering 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

Kekurangan potongan 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 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 sederhana bekerja dengan baik untuk gradient. Tapi tidak memaafkan pengaturan yang tidak lengkap. Banyak gagal bukanlah bug visual. Mereka adalah masalah tautan, pods, atau lingkungan pengujian.

Tabel keputusan praktis:

Sangat umum untuk menggunakan set kecil gradient yang sama secara berulang. Latar belakang. Tombol. Judul. Jika ketiga itu solid, Anda bisa menggunakannya di banyak layar.

Seorang orang bekerja di laptop menampilkan antarmuka dashboard modern dengan elemen desain gradient warna-warni.

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 ini akan berpasangan dengan pola startup yang lebih luas yang dijelaskan dalam panduan layar masuk React Native ini Gradien latar belakang layar penuh.

Pola ini adalah 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. Simpan perilaku tombol 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 terbaca lebih baik 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 akan membutuhkan @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 untuk mengisi ruang visual lebih dari 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 kilauan. Gradien animasi memberikan Anda feedback.

Penggunaan yang paling praktis bukanlah latar belakang yang berkilau. Itu adalah loader kilau. Efek itu memberitahu pengguna bahwa aplikasi aktif, data datang, dan tata letak yang mereka lihat sengaja bukan 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 gradasi sudah cukup dan kapan aset animasi yang lebih kaya membuat lebih banyak arti.

Loader shimmer yang terasa native

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

Pasang Reanimated jika belum ada di aplikasi Anda, kemudian buat wrapper dengan overflow: 'hidden'. Di dalamnya, animasikan layer gradasi 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 berhasil adalah Anda tidak mencoba menganimasikan definisi gradasi itu sendiri. Anda menganimasikan layer gradasi ke atas tempat holder statis. Itu lebih sederhana, lebih mudah dipahami, dan biasanya lebih stabil di berbagai perangkat.

Berikut adalah walkthrough visual efek dalam prakteknya:

Komponen yang dianimasikan

Catatan implementasi yang beberapa hal penting:

• Gunakan clipping: Orang tua memerlukan overflow: 'hidden', atau kilauan akan menyebar di luar sudut bulat.
• Tetapkan lebar band sempit: Layer animasi yang lebih kecil lebih mudah untuk disesuaikan daripada menganimasi permukaan seluruhnya.
• Match warna dasar dengan layar: Loader kerangka paha harus sesuai dengan tata letak sekitar, bukan terlihat seperti widget terpisah.

Gradien animasi bekerja terbaik ketika pengguna hampir tidak menyadarinya. Jika kilauan menjadi hal yang paling keras di layar, itu melakukan terlalu banyak.

Kinerja, Aksesibilitas, dan Kekacauan Platform

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

Jika Anda memperketat responsif aplikasi secara lebih luas, ini Petunjuk Optimasi Kinerja Aplikasi Mobile Mengikuti pemikiran 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.

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

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 keterbacaan dengan cepat karena perubahan kontras di seluruh permukaan.

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

Periksa titik terburuk 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 pengaturan status bar dan area yang aman. Gradient yang seimbang di simulator dapat terasa berat di atas perangkat dengan notch jika konten dan latar belakang tidak mempertimbangkan ruang tambahan itu.

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.
• Kendalikan 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 asli, ikon, dan penanganan status bar.
• Tangani setup yang tidak berpakaian sebagai setup asli: Pods, penghubung, dan mock Jest bukanlah detail yang opsional.

Tiga kegagalan umum muncul secara berulang.

Gradasi tidak muncul

Penyebab: komponen ini tidak memiliki ukuran yang dapat dilihat.

Solusi: berikan tinggi eksplisit, atau induk dengan dimensi. flex: 1Suatu gradient dengan box layout tidak akan menampilkan dalam cara yang bermakna.

Pembangunan iOS gagal setelah instalasi

Penyebab: pods tidak terinstal atau grafik ketergantungan native tidak sinkron.

Solusi: jalankan pod install dalam ios, bersihkan folder pembangunan jika perlu, kemudian bangun kembali aplikasi. Dalam proyek tanpa bungkus, instal paket saja biasanya tidak cukup.

Tes gagal dengan kesalahan modul native

Penyebab: Jest mencoba memuat modul native yang sebenarnya.

Solusi: mock react-native-linear-gradient dengan react-native-linear-gradient/jest/linear-gradient-mock di 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 mobile hybrid dan ingin memperbarui JavaScript, CSS, salinan, konfigurasi, dan aset tanpa menunggu tinjauan toko, Capgo patut dipertimbangkan. Ini memberikan tim CapacitorJS dan Electron pembaruan hidup terkendali, saluran peluncuran, perlindungan rollback, dan visibilitas rilis tanpa mengubah proses pengiriman Anda menjadi kotak hitam.