reactjs - 保存数据并在另一个页面获取

问题描述

我正在主题之间切换。我有问题。例如，如果我在一页从暗模式切换到亮模式，其他页面不会改变主题。如何更改应用程序中所有页面的主题？或者我可以重新加载应用程序？如果是，我该怎么做？

为了节省所有费用，我正在使用 AsyncStorage

请帮帮我

FirstPage.js

..///


  constructor(props) {
    super(props);
    
    this.state = {
    isEnabled: '',
    theme: '',
    loading: true
       }
       
  }

  async componentDidMount() {

   const value = await AsyncStorage.getItem('theme')
   this.setState({
     theme: value,
     isEnabled: value == "black" ? true : false,
     loading: false
   })
   this.props.navigation.setParams({
    Theme: value == "black" ? "#171717" : "white"
  });
  }

  onSave = async (data) => {
    const { text } = this.state

        await AsyncStorage.setItem("theme", data);
        this.setState({
          theme: data
        })
        Expo.Updates.reload();
    
}

  toggleSwitch = () => {
    this.setState({ 
      isEnabled: this.state.isEnabled ? false : true,
    })
    if (this.state.isEnabled) {
      this.onSave("white")
    }
    else {
      this.onSave("black")
    }
  }

    render() {
      if (this.state.loading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }
      const { navigate } = this.props.navigation;
        return (
          

          <Text style={[styles.menuItem]}>Dark theme</Text>
  <Switch
        trackColor={{ false: "#767577", true: "#db0202" }}
        thumbColor={this.state.isEnabled ? "#f4f3f4" : "#f4f3f4"}
        onValueChange={this.toggleSwitch}
        value={this.state.isEnabled}
        style={{marginLeft: 10}}
      />


      <Text>{this.state.theme}</Text>
      <Text>{this.state.isEnabled ? "true" : "false"}</Text>


    

        )
    }
}

SecondPage.js

..//

class CoursesScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

        theme: '',
        fontLoaded: false,
        loading: true
    }
  }

  
    async componentDidMount() {

    

    componentWillMount() {
      this.onLoad();
  }

  onLoad = async () => {
    
    const value = await AsyncStorage.getItem('theme')
     this.setState({
       theme: value,
       loading: false
     })
     this.props.navigation.setParams({
      Theme: value == "black" ? "#171717" : "white"
    });
}


    render() {
      if (this.state.loading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }
 const { navigate } = this.props.navigation;

            return (


                  ..//
            );
  }
}

标签： reactjsreact-native

您要求逻辑解决方案，所以我不打算在这里编写代码，而是想分享一些可能帮助您完成工作的技巧。

如果您的应用程序不是那么大，并且您不想对项目进行重大更改，那么这就是我在 react-native 的第一个小项目中所做的。只需将您的主题值保存到您的 AsyncStorage 中，并更改该屏幕的状态以反映您的主题，就像您正在做的那样，对。现在你可以做的是，当你关闭设置屏幕时，在将焦点转移到任何其他屏幕之前，你可以从 AsnycStorage 获取数据并在新屏幕状态下设置数据。你可以像这样使用 ReactNevigation 的焦点事件

useEffect(() => { const unsubscribe = navigation.addListener("focus",()=>{

//fetchSettings() })

返回退订；

}，[导航]）

最后，如果其他屏幕堆叠在此屏幕内，您可能不需要一次又一次地获取数据，您只需从导航中传递 settingsData。我知道这不是解决这个问题的最佳方式，但拥有 4 或 5 个屏幕就可以很好地完成工作。

现在这是完成这项工作的最佳方法，但您必须了解 Context API。我使用的是 react-native-paper，它有一个主题提供程序。您只需要创建不同的主题并将 react-native-theme 提供程序包装在您的主题上下文中。将您应用程序组件的所有颜色都引用到主题。现在您所要做的就是当用户切换主题时，设置用户在存储中的选择以供字母使用，并使用您的上下文 api 来更改主题变量。 https://www.seishin.me/dynamic-switching-of-themes-in-react-native-app-the-funky-way-with-hooks/ 这是完成此主题功能的更好方法。使用 react-native-paper 也不重要，您可以按照自己的方式进行操作。或使用其他主题提供者

reactjs - 保存数据并在另一个页面获取 - React Native

问题描述

解决方案

推荐阅读