如何在不重新加载整个应用程序的情况下获取异步数据

Question

我正在尝试当用户单击底部tabnavigator时，组件屏幕将重新加载。我的意思是，在我的第一个组件屏幕"另一个a.js"中，我正在使用textInput在async存储中输入数据和另一个组件" entherb.js"，我使用的是async存储的get（）在屏幕。我可以在重新加载整个应用程序时第一次看到存储的数据。

我试图通过使用底部tabnavigator导航，即可立即显示数据。

。

//App.js
import React, { Component } from "react";
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { TabNavigator } from 'react-navigation';
import AnotherA from './AnotherA';
import AnotherB from './AnotherB';
const AppNavigator = createMaterialBottomTabNavigator(
  {
    AnotherA: { screen: AnotherA },
    AnotherB: { screen: AnotherB }
  },
  {
    initialRouteName: 'AnotherA',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    barStyle: { backgroundColor: '#694fad' },
    pressColor: 'pink',
  },
  {
    //tabBarComponent: createMaterialBottomTabNavigator /* or TabBarTop */,
    tabBarPosition: 'bottom',
    defaultnavigationOptions: ({ navigation }) => ({
      tabBarOnPress: (scene, jumpToIndex) => {
        console.log('onPress:', scene.route);
        jumpToIndex(scene.index);
      },
    }),
  }
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

//另一个

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from './styles';
export default class AnotherA extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
            text1: '',
        }
    }
    async getKey() {
        try {
            //const value = await AsyncStorage.getItem('@MySuperStore:key');
            const key = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({
                myKey: key,
            });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }
    async saveKey(text1) {
        try {
            await AsyncStorage.setItem('@MySuperStore:key', text1);
        } catch (error) {
            console.log("Error saving data" + error);
        }
    }
    async resetKey() {
        try {
            await AsyncStorage.removeItem('@MySuperStore:key');
            const value = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({
                myKey: value,
            });
        } catch (error) {
            console.log("Error resetting data" + error);
        }
    }
    componentDidMount() {
        this.getKey();
    }
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    placeholder="Enter Data"
                    value={this.state.myKey}
                    onChangeText={(value) => this.setState({ text1: value })}
                    multiline={true}
                />
                <Button
                    onPress={() => this.saveKey(this.state.text1)}
                    title="Save"
                />
                <Button
                    //style={styles.formButton}
                    onPress={this.resetKey.bind(this)}
                    title="Reset"
                    color="#f44336"
                    accessibilityLabel="Reset"
                />
                </View>
        )
    }
}

//enternb.js

import React, { Component } from 'react';
import { AppRegistry, AsyncStorage, View, Text, Button, TextInput, StyleSheet, Image, TouchableHighlight, Linking } from 'react-native';
import styles from './styles';
export default class AnotherB extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myKey: '',
            text1: '',
        }
    }
    async getKey() {
        try {
            //const value = await AsyncStorage.getItem('@MySuperStore:key');
            const key = await AsyncStorage.getItem('@MySuperStore:key');
            this.setState({
                myKey: key,
            });
        } catch (error) {
            console.log("Error retrieving data" + error);
        }
    }
    componentDidMount() {
        this.getKey();
    }
    render() {
        //const { navigate } = this.props.navigation;
        //const { newValue, height } = this.state;
        return (
            <View style={styles.container}>
                <Text>{this.state.myKey}</Text>
            </View>
        )
    }
}

请建议，我是React-Native的新手。

Answer 1

问题是，当组件安装时，您正在从 AsyncStorage中检索值。不幸的是，当您切换选项卡时，这不会在屏幕上加载值。您需要做的是订阅导航生命周期的更新。

这很直截了当。您可以订阅四个生命周期活动。您可以选择要订阅的哪个。

• willFocus-屏幕将聚焦
• didFocus-屏幕集中（如果有过渡，过渡完成）
• willBlur-屏幕将不关注
• didBlur-屏幕未关注（如果有过渡，过渡完成）

您会订阅组件安装时的事件，然后在卸下时退订。因此，当您订阅的事件发生时，它将调用您已在订户回调中输入的功能。

因此，您可以在AnotherB.js中执行这样的操作：

componentDidMount() {
    // subscribe to the event that we want, in this case 'willFocus'
    // when the screen is about to focus it will call this.getKey
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.getKey);
}
componentWillUnmount() {
    // unsubscribe to the event 
    this.willFocusSubscription.remove();
}
getKey = async () => { // update this to an arrow function so that we can still access this, otherwise we'll get an error trying to setState.
    try {
        const key = await AsyncStorage.getItem('@MySuperStore:key');
        this.setState({
            myKey: key,
        });
    } catch (error) {
        console.log("Error retrieving data" + error);
    }
}

这是我创建的快速小吃，显示它有效

您可以尝试添加，然后在getItem

之后

AsyncStorage.getItem("@MySuperStore:key").then((value) => {
    this.setState({
        myKey: value,
    });
})
.then(res => {
    //do something else
});