Реагировать на собственный заголовок, активируемый с помощью asyncStorage - PullRequest
Новая
       27

Реагировать на собственный заголовок, активируемый с помощью asyncStorage

0 голосов
/ 18 декабря 2018

По сути, у меня есть значок облака в верхнем правом углу экрана моего приложения, и когда я щелкаю по нему, я хочу, чтобы он редактировал переменную AsyncStorage в моем приложении.И я пытаюсь заставить эту переменную изменить стиль <Icon> класса.

Чтобы сделать это, я пытаюсь сделать его активным элементом, но я не знаю, как передать это onClick к переменной, которую видит каждый экранный файл.

В данный момент стиль значков, т.е. основан на navigation.state.params.cloud, но установлен только на ComponentDidMount() в каждом экранном файле.

У кого-нибудь есть какие-либо предложения о том, как этого добиться?

Мое приложение React-Native настроено так:

index.js 

import { AppRegistry } from 'react-native';
import App from './app/config/app';

AppRegistry.registerComponent('MobApp', () => App);

/ config / app.js 

import React from 'react';
import { TouchableOpacity, ActivityIndicator, AsyncStorage, Button, StatusBar, StyleSheet, View, Text, Image } from 'react-native';
import { StackNavigator, SwitchNavigator } from 'react-navigation'; // Version can be specified in package.json
import { configureFontAwesomePro } from "react-native-fontawesome-pro";
import Icon from "react-native-fontawesome-pro";

configureFontAwesomePro();

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import MainScreen from '../screens/main';
import SettingsScreen from '../screens/settings';

const cloudLogo = async function() {
  let cloud = await AsyncStorage.getItem('cloud');
    cloud = cloud === 'true';
    cloud = !cloud;

    await AsyncStorage.setItem('cloud', cloud.toString())
    return cloud;
}

var navo = ({ navigation }) => {

  return {
    headerStyle: { backgroundColor:"#fff"},
    headerTitle: (<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center' }}><Image style={{ width:25, height: 25, marginTop: 3, marginRight: 5}} source={require('../images/logo.png')}/><Text style={{ color:"#3F61E7", fontSize: 26, fontWeight:"600" }}>MyCompany</Text></View>),
    headerRight: (<TouchableOpacity activeOpacity={0.8} onPress={ async () => {

        let cloud = await AsyncStorage.getItem('cloud');
        cloud = cloud === 'true';
        cloud = !cloud;

        await AsyncStorage.setItem('cloud', cloud.toString())
        console.log((await syncUtil.getLocal()).cloud)

      } } style={{ marginRight:15 }}>
        <Icon name="cloud" type={ typeof navigation.state.params == 'undefined' ? "solid" : (navigation.state.params.cloud ? "solid" : "light") } color="#3F61E7" size={30} />
      </TouchableOpacity>)
  } 
}

const AppStack = StackNavigator({ 
  Home: { screen: MainScreen, navigationOptions: navo },
  Settings: { screen: SettingsScreen, navigationOptions: navo },
});

export default SwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack
  },
  {
    initialRouteName: 'AuthLoading', 
  }
);
...