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;也許這是一些完全愚蠢的，我只是沒有看到它，但我已經嘗試過很多事情，不知道該怎麼辦。
問候尼爾斯
不，它也發生在發佈版本中。 –