React Native Academy · Pelajaran

Membina Skrin Tetapan Berterusan

Cipta skrin tetapan dengan togol untuk pemberitahuan dan mod gelap, simpan setiap tetapan dalam AsyncStorage dan pulihkan keutamaan semasa aplikasi dimulakan.

Pelajaran 3 daripada 413 langkah

Membina Skrin Tetapan Berterusan ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Fungsi Skrin Tetapan Berterusan

Skrin tetapan berterusan membolehkan pengguna mengkonfigurasi keutamaan aplikasi — seperti mod gelap, keutamaan pemberitahuan atau bahasa — dan memastikan keutamaan tersebut kekal selepas aplikasi dimulakan semula. Tetapan disimpan kepada AsyncStorage apabila berubah dan dimuatkan semula ketika permulaan. Ini ialah salah satu corak yang paling biasa dalam mana-mana aplikasi React Native untuk penggunaan sebenar.

Mentakrifkan Keadaan Tetapan

Mulakan dengan mentakrifkan antara muka TypeScript untuk objek tetapan anda dan pemalar DEFAULT_SETTINGS yang digunakan apabila tiada tetapan tersimpan (pelancaran pertama). Menyimpan nilai lalai dalam pemalar memudahkan penggunaan nilai gantian dengan selamat serta rujukan kepada bentuk awal dalam pengawal jenis dan logik pemindahan.

interface Settings {
  darkMode: boolean;
  notificationsEnabled: boolean;
  fontSize: 'small' | 'medium' | 'large';
}

const DEFAULT_SETTINGS: Settings = {
  darkMode: false,
  notificationsEnabled: true,
  fontSize: 'medium',
};

const SETTINGS_KEY = 'app_settings';

Memuatkan Tetapan ketika Skrin Dipasang

Dalam useEffect dengan tatasusunan kebergantungan kosong, baca tetapan daripada AsyncStorage, hurai JSON tersebut dan letakkan hasilnya dalam keadaan komponen. Paparkan ActivityIndicator semasa memuatkan supaya pengguna tidak melihat seketika nilai lalai sebelum tetapan sebenar dipaparkan.

const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
const [loading, setLoading] = React.useState(true);

useEffect(() => {
  async function loadSettings() {
    const json = await AsyncStorage.getItem(SETTINGS_KEY);
    if (json) {
      setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(json) });
    }
    setLoading(false);
  }
  loadSettings();
}, []);

Menyimpan Tetapan Apabila Berubah

Cipta fungsi pembantu yang menggabungkan tetapan baharu ke dalam objek tetapan semasa dan menulis hasilnya kepada AsyncStorage. Panggil fungsi ini daripada pengendali perubahan setiap kawalan antara muka pengguna supaya tetapan disimpan serta-merta selepas setiap interaksi pengguna. Skrin tetapan tidak memerlukan butang 'Simpan' yang berasingan.

async function updateSetting<K extends keyof Settings>(key: K, value: Settings[K]) {
  const updated = { ...settings, [key]: value };
  setSettings(updated);
  await AsyncStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
}

Memaparkan Togol Mod Gelap

Gunakan komponen Switch React Native untuk tetapan boolean. Pautkan prop value kepada keadaan dan panggil updateSetting dalam onValueChange. Antara muka pengguna dikemas kini serta-merta melalui keadaan, manakala AsyncStorage menyimpan data di latar belakang, lalu memberikan rasa responsif tanpa menunggu penulisan selesai.

<View style={styles.row}>
  <Text style={styles.label}>Dark Mode</Text>
  <Switch
    value={settings.darkMode}
    onValueChange={(value) => updateSetting('darkMode', value)}
    trackColor={{ false: '#ccc', true: '#6200ee' }}
    thumbColor={settings.darkMode ? '#fff' : '#f4f3f4'}
  />
</View>

Memaparkan Togol Pemberitahuan

Tambahkan baris Switch kedua untuk tetapan pemberitahuan mengikut corak yang sama. Penggunaan semula pembantu updateSetting memastikan kod mematuhi DRY — anda hanya perlu menukar argumen kunci untuk menyasarkan tetapan lain. Corak ini boleh dikembangkan kepada sebarang bilangan tetapan boolean tanpa menggandakan logik penyimpanan.

<View style={styles.row}>
  <Text style={styles.label}>Notifications</Text>
  <Switch
    value={settings.notificationsEnabled}
    onValueChange={(value) => updateSetting('notificationsEnabled', value)}
  />
</View>

Pemilih Saiz Fon dengan Pilihan yang Boleh Ditekan

Untuk tetapan enum seperti saiz fon, paparkan baris butang Pressable, satu untuk setiap pilihan. Serlahkan pilihan yang sedang dipilih dengan warna latar yang berbeza. Menekan butang akan memanggil updateSetting dengan nilai baharu. Ini menghasilkan kawalan pilihan yang padat dan mudah dicapai tanpa menu lungsur penuh.

const fontSizes: Settings['fontSize'][] = ['small', 'medium', 'large'];

<View style={styles.row}>
  <Text style={styles.label}>Font Size</Text>
  <View style={styles.optionRow}>
    {fontSizes.map((size) => (
      <Pressable
        key={size}
        onPress={() => updateSetting('fontSize', size)}
        style={[
          styles.option,
          settings.fontSize === size && styles.optionSelected,
        ]}
      >
        <Text>{size}</Text>
      </Pressable>
    ))}
  </View>
</View>

Menggunakan Tetapan Secara Global dengan Context

Supaya mod gelap mempengaruhi seluruh aplikasi, tetapan perlu dikongsi secara global. Muatkan tetapan pada akar aplikasi (dalam App.tsx) dan simpannya dalam SettingsContext. Mana-mana skrin yang memerlukan tema semasa boleh membaca daripada context dan bukannya memuatkan daripada AsyncStorage setiap kali. Hanya akar aplikasi memuatkan data daripada stor sekali ketika permulaan.

// App.tsx
const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);

useEffect(() => {
  loadSettings().then(setSettings);
}, []);

return (
  <SettingsContext.Provider value={{ settings, updateSetting }}>
    <NavigationContainer theme={settings.darkMode ? DarkTheme : DefaultTheme}>
      <AppNavigator />
    </NavigationContainer>
  </SettingsContext.Provider>
);

Butang Tetapkan Semula kepada Nilai Lalai

Tambahkan butang 'Tetapkan Semula kepada Nilai Lalai' di bahagian bawah skrin tetapan. Apabila ditekan, butang itu memanggil AsyncStorage.removeItem untuk memadam tetapan yang disimpan dan menetapkan semula keadaan setempat kepada DEFAULT_SETTINGS. Sahkan tindakan dengan Alert sebelum melaksanakan penetapan semula kerana ini ialah operasi yang berpotensi memusnahkan data.

function handleReset() {
  Alert.alert('Reset Settings', 'Restore all settings to their defaults?', [
    { text: 'Cancel', style: 'cancel' },
    {
      text: 'Reset',
      style: 'destructive',
      onPress: async () => {
        await AsyncStorage.removeItem(SETTINGS_KEY);
        setSettings(DEFAULT_SETTINGS);
      },
    },
  ]);
}

Menguji Ketekalan Merentas Pelancaran Semula

Untuk mengesahkan bahawa tetapan anda benar-benar kekal, ubah satu tetapan, tutup aplikasi sepenuhnya (bukan sekadar meletakkannya di latar belakang), buka semula aplikasi dan semak bahawa nilai yang diubah dipaparkan. Dalam Expo Go, anda boleh mengujinya dengan menutup aplikasi secara paksa. Dalam binaan pembangunan, goncang peranti untuk mengakses menu pembangunan dan muat semula bagi mensimulasikan permulaan baharu sambil mengekalkan data AsyncStorage.

Struktur Lengkap Skrin Tetapan

Berikut ialah struktur penuh skrin tetapan yang menggabungkan semua corak daripada pelajaran ini. Skrin memuatkan tetapan ketika dipasang, memaparkan togol dan pemilih yang memanggil updateSetting, menggunakan gaya yang menghormati tetapan mod gelap, serta menyertakan butang tetapkan semula di bahagian bawah. Templat ini boleh disesuaikan untuk keutamaan khusus mana-mana aplikasi.

export default function SettingsScreen() {
  const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
  const [loading, setLoading] = React.useState(true);

  useEffect(() => { loadSettings().then((s) => { setSettings(s); setLoading(false); }); }, []);

  if (loading) return <ActivityIndicator />;

  return (
    <ScrollView style={[styles.container, settings.darkMode && styles.dark]}>
      <SwitchRow label='Dark Mode' value={settings.darkMode}
        onChange={(v) => updateSetting('darkMode', v)} />
      <SwitchRow label='Notifications' value={settings.notificationsEnabled}
        onChange={(v) => updateSetting('notificationsEnabled', v)} />
      <FontSizeRow value={settings.fontSize}
        onChange={(v) => updateSetting('fontSize', v)} />
      <Button title='Reset to Defaults' onPress={handleReset} color='red' />
    </ScrollView>
  );
}

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini anda telah mempelajari bahawa: pemuatan ketika pemasangan dengan useEffect memulihkan tetapan daripada AsyncStorage sebelum skrin dipaparkan, satu pembantu updateSetting menggabungkan perubahan dan menulis kepada AsyncStorage untuk sebarang kunci tetapan, dan perkongsian tetapan melalui Context menjadikan keutamaan seperti mod gelap tersedia di seluruh aplikasi. Seterusnya, kita akan meneroka pengosongan storan dan strategi pemindahan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membina Skrin Tetapan Berterusan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Membina Skrin Tetapan Berterusan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membina Skrin Tetapan Berterusan”?

Cipta skrin tetapan dengan togol untuk pemberitahuan dan mod gelap, simpan setiap tetapan dalam AsyncStorage dan pulihkan keutamaan semasa aplikasi dimulakan. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Membina Skrin Tetapan Berterusan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Membaca dan Menulis dengan AsyncStorage
Menyimpan dan Menghuraikan Objek JSON
Membina Skrin Tetapan Berterusan
Mengosongkan Stor dan Strategi Penghijrahan

← Kembali ke React Native Academy