Question

我想在我的应用程序中实现暗模式和黑模式，而我的方式是用户从一个类切换暗/黑模式，在该类中我希望将状态更新为所有类，类如下：

AppearanceToggle类

  state = {
    BlackModeValue: null,
    DarkModeValue: null
  };
  componentDidMount = () => {
    AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
    AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
  };

  //AsyncStorage.setItem .........

  render() {
    return (

      <ScrollView style={[ styles.View , this.state.DarkModeValue ?  darkmode.ASView : null || this.state.BlackModeValue ? blackmode.ASView : null ]}>
          <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>              
             <SettingsList.Item
              hasSwitch={true}
              switchState={this.state.DarkModeValue}
              switchOnValueChange={//Goes to asyncStorage.setItem method}
              title='Dark Mode'
            />
           <SettingsList.Item
             hasSwitch={true}
             switchState={this.state.BlackModeValue}
             switchOnValueChange={//Goes to asyncStorage.setItem method}
             title='Black Mode'
           />
          </SettingsList>
      </ScrollView>
    );
  }
}

然后在要设置.getItem并更改状态的类（即SettingsScreen.js，这是导航到AppearanceToggle的屏幕）中，如下所示：

  state = {
      switchValue: false,
      rated: false,
      DarkModeValue:null,
      BlackModeValue:null,
    };
  componentDidMount = () => {
    AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
    AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
  };
  render() {
    return (
      <ScrollView style={[ styles.View , this.state.DarkModeValue ?  styles.DMView : null || this.state.BlackModeValue ? styles.BMView : null ]}>
        ..........
       </ScrollView>

我遇到的问题是，当我更改开关时，它会立即影响AppearanceToggleScreen类，但不会影响SettingsScreen，除非我刷新应用程序。有没有一种方法可以使所有人立即受到影响？

Answer 1

也许传播它的最好方法是使用Context或根组件来监听AppComponent中的更改。例如

因此，您将创建一个主题上下文，如：

export const themes = {
  blackMode: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  darkMode: {
    foreground: '#2f4f4ff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(
  themes.darkMode // default value
)

;

您的AppearanceToggle类的内容如下：

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

class ThemedButton extends Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;

然后您的AppComponent可能是

    import {ThemeContext, themes} from './theme-context';
    import ThemedButton from './themed-button';



    function Toolbar(props) {
      // Render your customized toolbar here and bind the changeTheme function to it
    }


class App extends Component {
  constructor(props) {
    super(props);
   };

  componentDidMount = () => {
     AsyncStorage.getItem('selectedTheme').then(value => this.setState({ selectedTheme: JSON.parse(value) }));
  };


    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.darkMode
            ? themes.blackMode
            : themes.darkMode,
      }));
    };
  }

  render() {
    // The ThemedButton button inside the ThemeProvider
    // uses the theme from state while the one outside uses
    // the default dark theme
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}

更多read

Answer 2

问题在于，您正在AppearanceToggleScreen中更改状态，因此将组件重新呈现（具有新主题），但是因为SettingsScreen已在导航堆栈中（因为componentDidMount不再执行。

现在，也许您想使用Context API来全局访问值，或执行类似this的操作。

React Native：使用AsyncStorage和States动态更改样式

2 个答案: