使用状态/上下文动态更改React Native中的配置colors.js

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

const ColorsContext = createContext();

const ColorsProvider = ({ children }) => {
  const [colors, setColors] = useState({
    primary: '#000000',
    secondary: '#ffffff',
  });

  const updateColors = (newColors) => {
    setColors(newColors);
  };

  return (
    <ColorsContext.Provider value={{ colors, updateColors }}>
      {children}
    </ColorsContext.Provider>
  );
};

export { ColorsContext, ColorsProvider };

import React from 'react';
import { ColorsProvider } from './ColorsContext';
import App from './App';

const Root = () => {
  return (
    <ColorsProvider>
      <App />
    </ColorsProvider>
  );
};

export default Root;

import React, { useContext } from 'react';
import { ColorsContext } from './ColorsContext';

const MyComponent = () => {
  const { colors, updateColors } = useContext(ColorsContext);

  const handleColorChange = () => {
    const newColors = {
      primary: '#ff0000',
      secondary: '#00ff00',
    };
    updateColors(newColors);
  };

  return (
    <div>
      <div style={{ backgroundColor: colors.primary }}>Primary Color</div>
      <div style={{ backgroundColor: colors.secondary }}>Secondary Color</div>
      <button onClick={handleColorChange}>Change Colors</button>
    </div>
  );
};

export default MyComponent;