React-Native如何实现暗模式？

Question

嗨，我想对我的应用实施暗模式。我有一个名为ColorSchemes.js的文件，其中定义了基本主题和深色主题。因此，如何在此文件上实现主题化。我想在全局级别上在主题之间进行保存切换！

ColorSchemes.js

    #include <iostream>
    #include <fstream>
    #include <sstream>
    #include <string>
    #include <cmath>
    #include <limits>
    #include <iomanip>
    #include <vector>
    using namespace std;


    int main()
    {
           cout<<setprecision(10);
           //vector<vector<double> > observ_matr;
           ifstream myfile("Salary_Data.csv");
           vector<vector<double> > vec;
           string line;
           while(getline(myfile,line))
           {
                  stringstream lineStream(line);
                  string cell;
                  vector<double> temp_vec;
                  while(getline(lineStream, cell, ','))
                  {
                          temp_vec.push_back(atof(cell.c_str()));
                  }
                  vec.push_back(temp_vec);
           }
           for(int i=0;i<vec.size();i++)
           {
                  for(int j=0;j<vec.size();j++)
                  {
                          cout<<vec[i][j]<<"\t\t";
                  }
                  cout<<endl;
           }
           //cout<<vec[1].size();

           return 0;
     }

Answer 1

以React Context的形式创建一个主题管理器，该主题管理器将为应用程序组件提供当前主题，并通过toggle（）函数在主题之间进行切换

Answer 2

您可以从下面的链接使用react-native-dark-mode库。另外，请查看下面的示例。

React Native Dark Mode

App.js

import {initialMode, eventEmitter} from 'react-native-dark-mode';

state = {
      mode: initialMode,
};

componentDidMount() {
    eventEmitter.on('currentModeChanged', mode => {
      this.setState({mode});
    });
}

如果您使用的是React Navigation，则可以在导航AppContainer的ScreenProps道具中传递状态。

ColorSchemes.js

import { DynamicValue } from 'react-native-dark-mode';

const colorSet = {
  mainThemeBackgroundColor: new DynamicValue('#ffffff', '#000'),
  mainThemeForegroundColor: new DynamicValue('#4991ec', '#4991ec'),
  mainTextColor: new DynamicValue('#151723', '#ffffff'),
  mainSubtextColor: new DynamicValue('#7e7e7e', '#f5f5f5'),
  hairlineColor: new DynamicValue('#e0e0e0', '#222222'),
  subHairlineColor: new DynamicValue('#f2f2f3', '#f2f2f3'),
  tint: new DynamicValue('#3068CC', '#3068CC'),
  grey: new DynamicValue('grey', 'grey'),
  whiteSmoke: new DynamicValue('#f5f5f5', '#222222'),
  headerStyleColor: new DynamicValue('#ffffff', '#222222'),
  headerTintColor: new DynamicValue('#000000', '#ffffff'),
  bottomStyleColor: new DynamicValue('#ffffff', '#222222'),
  bottomTintColor: new DynamicValue('grey', 'lightgrey'),
  mainButtonColor: new DynamicValue('#e8f1fd', '#062246'),
  subButtonColor: new DynamicValue('#eaecf0', '#20242d'),
  tabColor: new DynamicValue('#ffffff', '#121212'),
};

const navThemeConstants = {
  light: {
    backgroundColor: '#fff',
    fontColor: '#000',
    secondaryFontColor: '#7e7e7e',
    activeTintColor: '#4991ec',
    inactiveTintColor: '#ccc',
    hairlineColor: '#e0e0e0',
  },
  dark: {
    backgroundColor: '#121212',
    fontColor: '#fff',
    secondaryFontColor: '#fff',
    activeTintColor: '#4991ec',
    inactiveTintColor: '#888',
    hairlineColor: '#222222',
  },
  main: '#4991ec',
};

这是一个示例，说明了如何使用react-native-dark-mode使黑暗模式正常工作。