3
我有一个问题。我仍然是反应原生的新手，但我找不到与我的问题有关的任何东西。不是在谷歌的反应/反应原生文档。JS线程似乎得到暂停
我已经在我上一个项目中遇到了这个问题，但我从来没有完成过它，也没有试图解决它。
所以问题是：
如果我使用this.setState()或this.props.navigator.resetTo()从react-native-navigation，少了点什么，直到我触摸到的地方我的显示器或转动我的设备。此外，它足以聚焦和取消对焦ios模拟器。
这似乎是JS线程暂停，直到我输入的东西。这也发生在我使用mobx observable时。但与observable，它不会比setState()经常发生。这就是为什么我将所有本地州迁至当地的mobx商店，这改善了我的情况，但有时候还是会发生反应 - 本机以某种方式等待触摸输入。我还试过的一件事是将resetTo()换成requestAnimationFrame()，这也改善了我的情况。
现在的示例代码：
这是我这将打开境界数据库初始画面。
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 {
\t constructor(props) {
\t \t super(props);
\t \t console.ignoreWarnings = ['Realm.openAsync'];
\t \t NavigateEverywhere.setNavigator(this.props.navigator);
\t }
\t // state = {
\t // \t statusText: 'Initializing Database...',
\t // \t uploadProgress: 0,
\t // \t downloadProgress: 0,
\t // \t uploadMax: 0,
\t // \t downloadMax: 0,
\t // \t uploadCurrent: 0,
\t // \t downloadCurrent: 0,
\t // \t workingUpload: false,
\t // \t workingDownload: false,
\t // \t realmHost: this.realmHost,
\t // \t realmServer: `http://${this.realmHost}/`,
\t // \t realm: `realm://${this.realmHost}/~/sitnu`
\t // };
\t @observable statusText = 'Initializing Database...';
\t @observable uploadProgress = 0;
\t @observable downloadProgress = 0;
\t @observable uploadMax = 0;
\t @observable downloadMax = 0;
\t @observable uploadCurrent = 0;
\t @observable downloadCurrent = 0;
\t @observable workingUpload = false;
\t @observable workingDownload = false;
\t realmHost = '';
\t realmServer = `http://${this.realmHost}/`;
\t realm = `realm://${this.realmHost}/~/sitnu`;
\t componentDidMount() {
\t \t this.bootStrap().catch(console.error);
\t }
\t async bootStrap() {
\t \t let user;
\t \t if (this.props.token && this.props.provider) {
\t \t \t try {
\t \t \t \t user = await Realm.Sync.User.registerWithProvider(this.realmServer, {
\t \t \t \t \t provider: this.props.provider,
\t \t \t \t \t providerToken: this.props.token
\t \t \t \t });
\t \t \t } catch (e) {
\t \t \t \t return this.props.navigator.resetTo({
\t \t \t \t \t screen: 'io.LoginRealm',
\t \t \t \t \t title: 'Login into Realm',
\t \t \t \t \t passProps: {
\t \t \t \t \t \t error: e
\t \t \t \t \t }
\t \t \t \t });
\t \t \t }
\t \t }
\t \t if (this.props.username && this.props.password) {
\t \t \t try {
\t \t \t \t user = await new Promise((resolve, reject) => {
\t \t \t \t \t Realm.Sync.User.login(this.realmServer, this.props.username, this.props.password, (err, u) => {
\t \t \t \t \t \t if (err) return reject(err);
\t \t \t \t \t \t resolve(u);
\t \t \t \t \t });
\t \t \t \t });
\t \t \t } catch (e) {
\t \t \t \t return this.props.navigator.resetTo({
\t \t \t \t \t screen: 'io.LoginRealm',
\t \t \t \t \t title: 'Login into Realm',
\t \t \t \t \t passProps: {
\t \t \t \t \t \t error: e
\t \t \t \t \t }
\t \t \t \t });
\t \t \t }
\t \t }
\t \t let users = [];
\t \t for (let key in Realm.Sync.User.all) {
\t \t \t users.push(Realm.Sync.User.all[key]);
\t \t }
\t \t if (users.length !== 0 && !user) {
\t \t \t user = users[0];
\t \t }
\t \t if (!user) {
\t \t \t return this.props.navigator.resetTo({
\t \t \t \t screen: 'io.LoginRealm',
\t \t \t \t title: 'Login into Realm',
\t \t \t \t passProps: {
\t \t \t \t \t error: 'user is undefined or null'
\t \t \t \t }
\t \t \t });
\t \t }
\t \t let realm;
\t \t try {
\t \t \t realm = await new Promise((resolve, reject) => {
\t \t \t \t Realm.openAsync({
\t \t \t \t \t schema: Schema,
\t \t \t \t \t sync: {
\t \t \t \t \t \t user: user,
\t \t \t \t \t \t url: this.realm
\t \t \t \t \t }
\t \t \t \t }, (error, realm) => {
\t \t \t \t \t if (error) return reject(error);
\t \t \t \t \t resolve(realm);
\t \t \t \t }, this.downloadCallback.bind(this));
\t \t \t });
\t \t } catch (e) {
\t \t \t console.log("Why");
\t \t \t return requestAnimationFrame(() => {
\t \t \t \t this.props.navigator.resetTo({
\t \t \t \t \t screen: 'io.LoginRealm',
\t \t \t \t \t title: 'Login into Realm',
\t \t \t \t \t passProps: {
\t \t \t \t \t \t error: e
\t \t \t \t \t }
\t \t \t \t });
\t \t \t });
\t \t }
\t \t this.workingUpload = false;
\t \t this.workingDownload = false;
\t \t this.statusText = 'Finishing Database...';
\t \t Everything.setRealm(realm);
\t \t const username = realm.objectForPrimaryKey('KeyValue', 'username');
\t \t const password = realm.objectForPrimaryKey('KeyValue', 'password');
\t \t const host = realm.objectForPrimaryKey('KeyValue', 'host');
\t \t const school = realm.objectForPrimaryKey('KeyValue', 'school');
\t \t const setup = realm.objectForPrimaryKey('KeyValue', 'setup');
\t \t 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) {
\t \t \t Everything.setCredentials(username.value, password.value, host.value, school.value);
\t \t \t Untis.setSettings(username.value, password.value, host.value, school.value);
\t \t \t requestAnimationFrame(() => {
\t \t \t \t this.props.navigator.resetTo({
\t \t \t \t \t screen: 'io.Home',
\t \t \t \t \t animated: true,
\t \t \t \t \t title: 'Home'
\t \t \t \t });
\t \t \t });
\t \t } else {
\t \t \t requestAnimationFrame(() => {
\t \t \t \t this.props.navigator.resetTo({
\t \t \t \t \t screen: 'io.Login',
\t \t \t \t \t animated: true,
\t \t \t \t \t navigatorStyle: {
\t \t \t \t \t \t navBarHidden: true,
\t \t \t \t \t \t statusBarTextColorSchemeSingleScreen: 'dark'
\t \t \t \t \t }
\t \t \t \t });
\t \t \t });
\t \t }
\t }
\t downloadCallback = async (transferred, transferable) => {
\t \t this.workingDownload = true;
\t \t this.downloadMax = transferable;
\t \t this.downloadCurrent = transferred;
\t \t this.downloadProgress = percentage.from(transferred, transferable)/100;
\t \t this.statusText = 'Sync Database';
\t };
\t render() {
\t \t return (
\t \t \t <View style={{
\t \t \t \t alignContent: "center",
\t \t \t \t alignItems: "center",
\t \t \t \t alignSelf: "center",
\t \t \t \t flex: 1,
\t \t \t \t justifyContent: "center"
\t \t \t }}>
\t \t \t \t <Text h5>{this.statusText ? <Text>{this.statusText}</Text> : null}</Text>
\t \t \t \t {this.workingUpload ? <View>
\t \t \t \t \t {/*<Progress.Bar progress={this.uploadProgress}/>*/}
\t \t \t \t \t <MKProgress style={{width: Dimensions.get('window').width - 40}} progress={this.uploadProgress}/>
\t \t \t \t \t <Text>Upload {this.uploadCurrent ?
\t \t \t \t \t \t <Text>{this.uploadCurrent}</Text> : null}/{this.uploadMax ?
\t \t \t \t \t \t <Text>{this.uploadMax}</Text> : null}</Text>
\t \t \t \t </View> : null}
\t \t \t \t {this.workingDownload ? <View style={{
\t \t \t \t \t alignContent: 'center',
\t \t \t \t \t alignItems: 'center',
\t \t \t \t \t alignSelf: 'center',
\t \t \t \t \t justifyContent: 'center'
\t \t \t \t }}>
\t \t \t \t \t {/*<Progress.Bar progress={this.downloadProgress}/>*/}
\t \t \t \t \t <MKProgress style={{width: Dimensions.get('window').width - 40}} progress={this.downloadProgress}/>
\t \t \t \t \t <Text>Download {this.downloadCurrent ?
\t \t \t \t \t \t <Text>{this.downloadCurrent}</Text> : null}/{this.downloadMax ?
\t \t \t \t \t \t <Text>{this.downloadMax}</Text> : null}</Text>
\t \t \t \t </View> : null}
\t \t \t </View>
\t \t);
\t }
}
export default Database;也许这是一些完全愚蠢的，我只是没有看到它，但我已经尝试过很多事情，不知道该怎么办。
问候尼尔斯
不，它也发生在发布版本中。 –