如何将当前主题扩展到我在 expo react-native 中的组件？

Question

我正在尝试在我的 expo react-native 应用程序中实现主题（深色 | 浅色）。我一直在阅读他们的 documentation 在博览会页面上的深色和浅色主题，这在 App.js 中有效。但是，每当我声明一个组件并将其导入 App.js 时，它都不起作用。我的思考过程是尝试将当前主题“扩展”到我的组件。

这是 App.js 代码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, useColorScheme } from 'react-native';

//import firebase + config
import firebaseConfig from './config'
import firebase from 'firebase'

//initialize firebase application
if(!firebase.apps.length){
  firebase.initializeApp(firebaseConfig)
} else{
  firebase.app()
}

//import screens
import Overview from './screens/Overview'

export default function App() {
  
  const colorScheme = useColorScheme();

  const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
  const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
  
    return (
      <View style={[styles.container, themeContainerStyle]}>
        <Overview />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    backgroundColor: '#fff',
  },
  darkContainer: {
    backgroundColor: '#101010',
  },
  lightThemeText: {
    color: '#000000',
  },
  darkThemeText: {
    color: '#ffffff',
  },
});

这是我的简单组件：

import React from 'react'
import {View, Text, useColorScheme} from 'react-native'

export default class App extends React.Component{

  render(){
    return(
      <View>
        <Text>OverView</Text>
      </View>
    )
  }
}

我要做的就是让 Overview 组件遵循主题规则，而不是需要声明已经在 App.js 中声明的样式。

现在它没有反映在代码中，但在发布这个问题之前我确实尝试了很多东西。

Answer 1

首先，从here安装react-native-appearance

创建一个名为 context 的文件夹，其中您的 App.js 位于其中，然后在其中创建一个名为 ThemeContext.js 的文件，其中看起来像这样

import React from "react";

const ThemeContext = React.createContext();

export default ThemeContext;

那么你的App.js 应该是这样的

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

//import firebase + config
import firebaseConfig from './config';
import firebase from 'firebase';
import ThemeContext from './context/ThemeContext'; // Imported Here

//initialize firebase application
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

//import screens
import Overview from './screens/Overview';

export default function App() {
  const colorScheme = useColorScheme();

  const themeValue =
    colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
  const themeContainerStyle =
    colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;

  return (
    <AppearanceProvider>
      <ThemeContext.Provider value={themeValue}> // Wrapped Here
        <View style={[styles.container, themeContainerStyle]}>
          <Overview />
        </View>
      </ThemeContext.Provider>
    </AppearanceProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    backgroundColor: '#fff',
  },
  darkContainer: {
    backgroundColor: '#101010',
  },
  lightThemeText: {
    color: '#000000',
  },
  darkThemeText: {
    color: '#ffffff',
  },
});

您的Overview.js 应该是这样的

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

function Overview() {
  const themeContext = React.useContext(ThemeContext);

  console.log(themeContext); // You will get styles logged into the console here

  return (
    <View>
      <Text>OverView</Text>
    </View>
  );
}

export default Overview;