Question

大家好，我想尝试实现react-native-dark-mode，但是在我的项目中没有用。 “ react-native”：“ 0.61.5”

我已经尝试过这样：

import { useDarkMode } from 'react-native-dark-mode'

export default class Login extends Component {
    render(){
    const isDarkMode = useDarkMode() // i think this make error
       return(
          <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }}></View>
       )
    }
}

这是我的错误 error-output

任何解决方案？

Answer 1

在您的情况下，react hooks仅可在functional components内使用

功能组件用法示例：

import { useDarkMode } from 'react-native-dark-mode'

function Component() {
    const isDarkMode = useDarkMode()
    return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}

类组件用法的示例：

您可以使用DarkModeContext。只需确保将应用程序包装在没有道具的DarkModeProvider中，以避免获得当前值。

1-设置应用程序的上下文提供程序。

// App.js or top of the hierarchy in your app
import React, {Component} from 'react';
import {DarkModeProvider} from 'react-native-dark-mode';

export default class App extends Component {
  render() {
    return (
      <DarkModeProvider>
        <YourApp />
      </DarkModeProvider>
    );
  }
}

2-将上下文与 contextType 或上下文使用者一起使用。

// class based component with contextType
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';

export default class HelloWorldText extends Component {
  static contextType = DarkModeContext;
  render() {
    const isDarkMode = this.context === 'dark';
    return (
      <Text style={{color: isDarkMode ? '#ffffff' : '#000000'}}>
        {this.props.children}
      </Text>
    );
  }
}

3-基于最终课程的组件

// class based component with context consumer
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';

export default class HelloWorldText extends Component {
  render() {
    return (
      <DarkModeContext.Consumer>
        {mode => (
          <Text style={{color: mode === 'dark' ? '#ffffff' : '#000000'}}>
            {this.props.children}
          </Text>
        )}
      </DarkModeContext.Consumer>
    );
  }
}

如果您想了解上下文，可以在context页中找到更多详细信息。对于类和函数组件来说，这都是非常有用的功能。

如何在iOS中实现react-native-dark-mode

1 个答案: