React Native类组件项目中深色主题适配问题求助

Hey there! I get that you're stuck trying to use your ThemeContext in class components like CardOne since useContext is a React Hook that can't be used directly in class components. Let's break down the fixes you need to make, plus two solid approaches to get your theme working in class components.

First, Fix the Existing Issues in Your Code #

Before we dive into the solutions, let's fix two critical mistakes in your current code:

1. Remove duplicate ThemeProvider in Home.js
   Your App.js already wraps the entire app in ThemeProvider—adding another one in Home.js creates a separate context instance. This means your child components won't share the same theme state as the rest of the app. Delete the ThemeProvider wrapper in Home.js:

   // Home.js (fixed)
   import 'react-native-gesture-handler';
   import React, { Component } from 'react';
   import {LogBox, SafeAreaView, StyleSheet, ScrollView, View} from 'react-native';
   import { Card } from 'react-native-elements';
   import CardOne from './Components/CardOne.js';
   import CardTwo from './Components/CardTwo.js';
   import CardThree from './Components/CardThree.js';
   import CardFour from './Components/CardFour.js';
   
   class Home extends Component {
     constructor(props) {
       super(props);
       // ...
     }
     render() {
       return (
         <View>
           <SafeAreaView>
             <ScrollView >
               <CardOne/>
               <CardTwo/>
               <CardThree/>
               <CardFour />
             </ScrollView>
           </SafeAreaView>
         </View>
       );
     }
   }
   
   export default Home;
   

2. Fix invalid useContext usage in CardOne.js
   You're trying to call useContext outside of a function component/custom hook, which is invalid. We'll replace this with a class-compatible approach below.

Solution 1: Use ThemeContext.Consumer #

The Context.Consumer component lets you access context values in class components by passing a function as its child. Here's how to modify CardOne.js:

import React, { Component } from 'react';
import { Card } from 'react-native-elements';
import {StyleSheet, View, Text, Image, Alert, TouchableOpacity, Switch} from 'react-native';
import { ThemeContext } from '../theme-context'; // Fix import path if needed

class CardOne extends Component {
  constructor(props) {
    super(props);
    // ...
  }

  render() {
    return (
      <ThemeContext.Consumer>
        {({ dark, theme, toggle }) => (
          <Card containerStyle={[styles.card, { backgroundColor: theme.backgroundCard }]}>
            <View>
              <Switch onChange={toggle} value={dark} />
              {/* Add other components here, using theme values */}
              <Text style={{ color: theme.color }}>This text adapts to the theme!</Text>
            </View>
          </Card>
        )}
      </ThemeContext.Consumer>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    borderColor: "#D1D1D6",
    borderWidth: 2,
    borderRadius: 5,
    shadowOffset:{
      width: 5,
      height: 5,
    },
    shadowColor: '#D1D1D6',
    shadowOpacity: 1.0,
    shadowRadius: 2,
    elevation: 3,
  }
});

export default CardOne;

Key Notes: #

• We wrap the entire component content in ThemeContext.Consumer, which passes the context values (dark, theme, toggle) to the child function.
• Dynamic styles (like backgroundColor) are added using array syntax to merge static styles with theme-dependent ones.
• Static styles stay in StyleSheet.create, while theme-specific styles are applied inline or merged in the render method.

Solution 2: Create a Higher-Order Component (HOC) #

If you have multiple class components that need access to the theme, a HOC can inject the context values into the component's props, making it cleaner to reuse.

First, create the HOC (e.g., withTheme.js):

import React from 'react';
import { ThemeContext } from './theme-context';

const withTheme = (Component) => {
  return class extends React.Component {
    render() {
      return (
        <ThemeContext.Consumer>
          {(themeContext) => (
            <Component {...this.props} {...themeContext} />
          )}
        </ThemeContext.Consumer>
      );
    }
  };
};

export default withTheme;

Then use it in CardOne.js:

import React, { Component } from 'react';
import { Card } from 'react-native-elements';
import {StyleSheet, View, Text, Image, Alert, TouchableOpacity, Switch} from 'react-native';
import withTheme from '../withTheme'; // Import the HOC

class CardOne extends Component {
  constructor(props) {
    super(props);
    // ...
  }

  render() {
    // Access theme values from props
    const { dark, theme, toggle } = this.props;

    return (
      <Card containerStyle={[styles.card, { backgroundColor: theme.backgroundCard }]}>
        <View>
          <Switch onChange={toggle} value={dark} />
          <Text style={{ color: theme.color }}>Themed text via HOC!</Text>
        </View>
      </Card>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    borderColor: "#D1D1D6",
    borderWidth: 2,
    borderRadius: 5,
    shadowOffset:{
      width: 5,
      height: 5,
    },
    shadowColor: '#D1D1D6',
    shadowOpacity: 1.0,
    shadowRadius: 2,
    elevation: 3,
  }
});

// Wrap the component with the HOC
export default withTheme(CardOne);

Key Notes: #

• The HOC handles the context consumption, so your class component only needs to access the theme values from this.props.
• This is great for reusability across multiple class components.

Bonus: Fix Navigation Header Styling #

Don't forget to make your navigation header theme-aware too! You can consume the context in the screenOptions by using a function:

// App.js - Update the Stack.Navigator screenOptions
<Stack.Navigator 
  screenOptions={() => {
    const { theme } = React.useContext(ThemeContext);
    return {
      headerStyle: {
        backgroundColor: theme.backgroundColor,
      },
      headerTintColor: theme.color,
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }
  }}
>

内容的提问来源于stack exchange，提问作者blendstylez