javascript - 带有 native react 的监听器上的 Firebase

Question

所以我正在尝试附加一个 .on 监听器，就像这样

firebase.database().ref('Users').child('AhvRcIT2anTaucSDoOgt2MLNxgZ2').on('value', snap => {
    const user = snap.val();
    alert(true);
}).catch(e => alert(e))

问题是，我收到一条错误消息

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info. (Saw setTimeout with duration 398331ms)

我想这是有道理的。我能找到的唯一解决方案就是隐藏警告，这听起来是个坏主意。特别是当我添加此监听器一段时间后，我的应用程序开始卡住。

我知道有 react-native-firebase 可用，但我已经阅读了它所做的一切，只是隐藏了警告，并没有真正解决问题。

这个问题怎么解决呢？还是在 Android 上就必须这样？

整个家庭类

export default class HomeScreen extends React.Component {
    static navigationOptions = {
        header: null,
    };

    componentWillMount() {
        (async () => {
            await firebase.auth().signInAndRetrieveDataWithEmailAndPassword('loigin', 'pass');
            const val = await firebase.database().ref('Users').child('AhvRcIT2anTaucSDoOgt2MLNxgZ2').once('value').then(r => r.val()).catch(e => alert(e));
            alert(val);
        })();
    }


    render() {
        // firebase.database().ref('Users').child('AhvRcIT2anTaucSDoOgt2MLNxgZ2').on('value', snap => {
        //     const user = snap.val();
        //     alert(true);
        // }).catch(e => alert(e))
        alert(false)
        return (
            <View style={styles.container}>
                <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
                    <View style={styles.welcomeContainer}>
                        <Image
                            source={
                                __DEV__
                                    ? require('../assets/images/robot-dev.png')
                                    : require('../assets/images/robot-prod.png')
                            }
                            style={styles.welcomeImage}
                        />
                    </View>

                    <View style={styles.getStartedContainer}>
                        {this._maybeRenderDevelopmentModeWarning()}

                        <Text style={styles.getStartedText}>Get started by opening</Text>

                        <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
                            <MonoText style={styles.codeHighlightText}>screens/HomeScreen.js</MonoText>
                        </View>

                        <Text style={styles.getStartedText}>
                            Change this text and your app will automatically reload.
                        </Text>
                    </View>

                    <View style={styles.helpContainer}>
                        <TouchableOpacity onPress={this._handleHelpPress} style={styles.helpLink}>
                            <Text style={styles.helpLinkText}>Help, it didn’t automatically reload!</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>

                <View style={styles.tabBarInfoContainer}>
                    <Text style={styles.tabBarInfoText}>This is a tab bar. You can edit it in:</Text>

                    <View style={[styles.codeHighlightContainer, styles.navigationFilename]}>
                        <MonoText style={styles.codeHighlightText}>navigation/MainTabNavigator.js</MonoText>
                    </View>
                </View>
            </View>
        );
    }

    _maybeRenderDevelopmentModeWarning() {
        if (__DEV__) {
            const learnMoreButton = (
                <Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>
                    Learn more
                </Text>
            );

            return (
                <Text style={styles.developmentModeText}>
                    Development mode is enabled, your app will be slower but you can use useful development
                    tools. {learnMoreButton}
                </Text>
            );
        } else {
            return (
                <Text style={styles.developmentModeText}>
                    You are not in development mode, your app will run at full speed.
                </Text>
            );
        }
    }

    _handleLearnMorePress = () => {
        WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/guides/development-mode');
    };

    _handleHelpPress = () => {
        WebBrowser.openBrowserAsync(
            'https://docs.expo.io/versions/latest/guides/up-and-running.html#can-t-see-your-changes'
        );
    };
}

Answer 1

您可以尝试下面的componentWillMount

 componentWillMount() {
            firebase
            .auth()
            .createUserWithEmailAndPassword('loigin', 'pass')
            .then(() => {

                firebase.database()
                    .ref('Users')
                    .child('AhvRcIT2anTaucSDoOgt2MLNxgZ2').on('value', function (snapshot) {
                        alert(snapshot.val())
                    })
                    .catch(e => alert(e));

            })
            .catch(error => {
                alert(error.message)
            })
}