3
질문이 있습니다. 나는 아직도 네이티브 반응에 초보자이지만 내 질문과 관련된 것을 찾을 수 없다. Google과 반응하거나 반응하지 않는 문서가 아닙니다.JS 스레드가 일시 중지 된 것 같습니다
내 마지막 프로젝트에서 이미이 문제가 있었지만 결코 끝내지 않았으며 문제를 해결하지도 않았습니다.
그래서 문제가 :
내가 react-native-navigation에서 this.setState() 또는 this.props.navigator.resetTo()를 사용하는 경우 내 디스플레이를 어딘가에 만지거나 내 장치를 회전 할 때까지, 그냥 아무것도하지 않는다. 또한 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;인사말 Nils
아니요, 출시 버전에서도 발생합니다. –