react-native - JS 线程似乎暂停了

Question

我有一个问题。我仍然是 react-native 的新手，但找不到与我的问题相关的任何内容。不在谷歌的 react/react-native 文档中。

我在上一个项目中已经遇到过这个问题，但我没有完成它，也没有尝试解决它。

所以问题是:

如果我使用来自 react-native-navigation 的 this.setState() 或 this.props.navigator.resetTo() ，直到我触摸显示器上的某处或旋转我的设备之前，它什么都不做。聚焦和取消聚焦 ios 模拟器也足够了。

在我输入某些内容之前，JS 线程似乎暂停了。当我使用 mobx observable 时也会发生这种情况。但是对于 observable，它发生的频率不如 setState()。这就是为什么我将所有本地状态移动到本地 mobx 存储的原因，它改善了我的情况，但有时仍然会发生 react-native 以某种方式等待触摸输入。我还尝试过的一件事是将每个 resetTo() 包装在 requestAnimationFrame() 中，这也稍微改善了我的情况。

现在是一个示例代码:

这是我打开 Realm 数据库的初始屏幕。

import React, {Component} from 'react';
import {View, Dimensions} from 'react-native';
import Schema from '../Schema';
import {Everything, Untis, NavigateEverywhere} from '../Stores/index';
import {Text} from 'react-native-elements';
// import * as Progress from 'react-native-progress';
import percentage from 'percentage-calc';
import Realm from 'realm';
import {observable} from "mobx"
import {observer} from 'mobx-react';
import {MKProgress} from 'react-native-material-kit';

@observer
class Database extends Component {

	constructor(props) {
		super(props);
		console.ignoreWarnings = ['Realm.openAsync'];
		NavigateEverywhere.setNavigator(this.props.navigator);
	}


	// state = {
	// 	statusText: 'Initializing Database...',
	// 	uploadProgress: 0,
	// 	downloadProgress: 0,
	// 	uploadMax: 0,
	// 	downloadMax: 0,
	// 	uploadCurrent: 0,
	// 	downloadCurrent: 0,
	// 	workingUpload: false,
	// 	workingDownload: false,
	// 	realmHost: this.realmHost,
	// 	realmServer: `http://${this.realmHost}/`,
	// 	realm: `realm://${this.realmHost}/~/sitnu`
	// };

	@observable statusText = 'Initializing Database...';
	@observable uploadProgress = 0;
	@observable downloadProgress = 0;
	@observable uploadMax = 0;
	@observable downloadMax = 0;
	@observable uploadCurrent = 0;
	@observable downloadCurrent = 0;
	@observable workingUpload = false;
	@observable workingDownload = false;
	realmHost = '';
	realmServer = `http://${this.realmHost}/`;
	realm = `realm://${this.realmHost}/~/sitnu`;

	componentDidMount() {
		this.bootStrap().catch(console.error);
	}

	async bootStrap() {
		let user;
		if (this.props.token && this.props.provider) {
			try {
				user = await Realm.Sync.User.registerWithProvider(this.realmServer, {
					provider: this.props.provider,
					providerToken: this.props.token
				});
			} catch (e) {
				return this.props.navigator.resetTo({
					screen: 'io.LoginRealm',
					title: 'Login into Realm',
					passProps: {
						error: e
					}
				});
			}
		}
		if (this.props.username && this.props.password) {
			try {
				user = await new Promise((resolve, reject) => {
					Realm.Sync.User.login(this.realmServer, this.props.username, this.props.password, (err, u) => {
						if (err) return reject(err);
						resolve(u);
					});
				});
			} catch (e) {
				return this.props.navigator.resetTo({
					screen: 'io.LoginRealm',
					title: 'Login into Realm',
					passProps: {
						error: e
					}
				});
			}
		}

		let users = [];
		for (let key in Realm.Sync.User.all) {
			users.push(Realm.Sync.User.all[key]);
		}
		if (users.length !== 0 && !user) {
			user = users[0];
		}

		if (!user) {
			return this.props.navigator.resetTo({
				screen: 'io.LoginRealm',
				title: 'Login into Realm',
				passProps: {
					error: 'user is undefined or null'
				}
			});
		}
		let realm;
		try {
			realm = await new Promise((resolve, reject) => {
				Realm.openAsync({
					schema: Schema,
					sync: {
						user: user,
						url: this.realm
					}
				}, (error, realm) => {
					if (error) return reject(error);
					resolve(realm);
				}, this.downloadCallback.bind(this));
			});
		} catch (e) {
			console.log("Why");
			return requestAnimationFrame(() => {
				this.props.navigator.resetTo({
					screen: 'io.LoginRealm',
					title: 'Login into Realm',
					passProps: {
						error: e
					}
				});
			});
		}

		this.workingUpload = false;
		this.workingDownload = false;
		this.statusText = 'Finishing Database...';

		Everything.setRealm(realm);

		const username = realm.objectForPrimaryKey('KeyValue', 'username');
		const password = realm.objectForPrimaryKey('KeyValue', 'password');
		const host = realm.objectForPrimaryKey('KeyValue', 'host');
		const school = realm.objectForPrimaryKey('KeyValue', 'school');
		const setup = realm.objectForPrimaryKey('KeyValue', 'setup');
		if (typeof username === 'object' && typeof password === 'object' && typeof host === 'object' && typeof school === 'object' && typeof setup === 'object' && username.value && password.value && host.value && school.value && setup.value) {
			Everything.setCredentials(username.value, password.value, host.value, school.value);
			Untis.setSettings(username.value, password.value, host.value, school.value);
			requestAnimationFrame(() => {
				this.props.navigator.resetTo({
					screen: 'io.Home',
					animated: true,
					title: 'Home'
				});
			});
		} else {
			requestAnimationFrame(() => {
				this.props.navigator.resetTo({
					screen: 'io.Login',
					animated: true,
					navigatorStyle: {
						navBarHidden: true,
						statusBarTextColorSchemeSingleScreen: 'dark'
					}
				});
			});
		}
	}

	downloadCallback = async (transferred, transferable) => {
		this.workingDownload = true;
		this.downloadMax = transferable;
		this.downloadCurrent = transferred;
		this.downloadProgress = percentage.from(transferred, transferable) / 100;
		this.statusText = 'Sync Database';
	};

	render() {
		return (
			<View style={{
				alignContent: "center",
				alignItems: "center",
				alignSelf: "center",
				flex: 1,
				justifyContent: "center"
			}}>
				<Text h5>{this.statusText ? <Text>{this.statusText}</Text> : null}</Text>
				{this.workingUpload ? <View>
					{/*<Progress.Bar progress={this.uploadProgress}/>*/}
					<MKProgress style={{width: Dimensions.get('window').width - 40}} progress={this.uploadProgress}/>
					<Text>Upload {this.uploadCurrent ?
						<Text>{this.uploadCurrent}</Text> : null}/{this.uploadMax ?
						<Text>{this.uploadMax}</Text> : null}</Text>
				</View> : null}
				{this.workingDownload ? <View style={{
					alignContent: 'center',
					alignItems: 'center',
					alignSelf: 'center',
					justifyContent: 'center'
				}}>
					{/*<Progress.Bar progress={this.downloadProgress}/>*/}
					<MKProgress style={{width: Dimensions.get('window').width - 40}} progress={this.downloadProgress}/>
					<Text>Download {this.downloadCurrent ?
						<Text>{this.downloadCurrent}</Text> : null}/{this.downloadMax ?
						<Text>{this.downloadMax}</Text> : null}</Text>
				</View> : null}
			</View>
		);
	}

}

export default Database;

也许这只是一些完全愚蠢的事情，我只是没有看到它，但我已经尝试了很多东西，但不知道该怎么做。

问候尼尔斯

Answer 1

我曾经遇到过类似的问题。这个问题来自 react-native 调试桥。尝试禁用 Debug模式。或者，如果它不起作用，请尝试生成并安装发布版本。