React Native Context用于更改主题

基础概念

React Native Context 提供了一种在组件树中共享数据的方式，而不必显式地通过 props 逐层传递。这对于全局状态管理（如主题更改）非常有用。

类型与应用场景

主题更改：如你所提到的，Context 非常适合用于管理应用的主题（如暗色模式和亮色模式）。
国际化：管理不同语言的翻译文本。
用户认证状态：存储用户的登录状态。

示例代码

以下是一个简单的示例，展示如何使用 React Native Context 来更改应用的主题。

创建 Context

import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

使用 Context

import React, { useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { ThemeContext } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      <ThemeToggleButton />
    </ThemeProvider>
  );
};

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <View style={[styles.container, theme === 'dark' && styles.darkTheme]}>
      <Text style={styles.text}>Current Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  darkTheme: {
    backgroundColor: '#333',
  },
  text: {
    color: '#fff',
    marginBottom: 10,
  },
});

export default App;