javascript - 带有反应原生的监听器上的 Firebase
问题描述
所以我试图附加一个 .on 监听器,就像这样
firebase.database().ref('Users').child('AhvRcIT2anTaucSDoOgt2MLNxgZ2').on('value', snap => {
const user = snap.val();
alert(true);
}).catch(e => alert(e))
问题是,我收到一条错误消息
长时间设置定时器,即多分钟,在 Android 上是一个性能和正确性问题,因为它使定时器模块保持唤醒状态,并且只能在应用程序处于前台时调用定时器。有关更多信息,请参阅https://github.com/facebook/react-native/issues/12981。(看到 setTimeout 持续时间为 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'
);
};
}
解决方案
您可以在下面尝试您的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)
})
}