React native 表现出奇怪的行为。有人可以解释吗？

Question

我正在创建一个带有身份验证的简单应用程序。使用带有 react-native-navigation (v1) 的 redux 更改状态。例如index.js

...
import { Navigation, } from 'react-native-navigation';
import { Provider, } from 'react-redux';
import store from './src/store';
import registerScreens from './src/screens';

registerScreens(store, Provider);

class App {

    constructor () {

        this.auth = false;

        store.subscribe(this.onStoreUpdate.bind(this));
        this.start();
    }

    onStoreUpdate () {

        const state = store.getState();

        if (this.auth != state.auth) {

            this.auth = state.auth;
            this.start();
        }
    }

    start () {

        switch (this.auth) {

            case false:

                Navigation.startTabBasedApp({
                    tabs: [{
                        screen: 'navigation.AuthScreen',
                    }, {
                        screen: 'navigation.RegisterScreen',
                    },],
                });
            break;

            case true:

                Navigation.startSingleScreenApp({
                    screen: {
                        screen: 'navigation.MainScreen',
                    },
                });
            break;
        }
    }
}

const application = new App();

Store 正在侦听更新并在需要时更改应用程序布局。

AuthScreen 在执行服务器请求时显示一个简单的ActivityIndicator。例如auth.js

...
import { bindActionCreators, } from 'redux';
import { connect, } from 'react-redux';

import * as actions from './../actions';
...

class AuthScreen extends Component {

    constructor (props) {

        super(props);

        this.state = {

            loading: false,
            ...
        };

        this.handlePressEnter = this.handlePressEnter.bind(this);
    }

    handlePressEnter () {

        ...

        this.loadingState(true);

        jsonFetch(url, {

            method: 'POST',
            body: JSON.stringify({...}),

        }).then((value) => {

            this.loadingState();
            this.props.actions.auth(true);

        }).catch((errors) => {

            this.loadingState();
            console.log('Error while auth', errors);
        });
    }

    ...

    loadingState (state = false) {

        this.setState({

            loading: state,
        });
    }

    render () {

        return (<View>
            ...
            <Modal visible={this.state.loading} transparent={true} animationType="none" onRequestClose={() => {}}>
                <View>
                    <ActivityIndicator size="large" animating={this.state.loading} />
                </View>
            </Modal>
        </View>);
    }
}

function mapStateToProps (state, ownProps) {

    return {};
}

function mapDispatchToProps (dispatch) {

    return {

        actions: bindActionCreators(actions, dispatch),
    };
}

export default connect(mapStateToProps, mapDispatchToProps) (AuthScreen);

我正在使用 iOS 模拟器启动应用程序并尝试进行身份验证。它向我显示活动指示器，然后指示器消失，但布局没有改变。还有奇怪的行为，如果我在auth.js 中评论this.loadingState(true); 和this.loadingState();，布局会随着成功而改变。

谁能给我解释一下，为什么在使用活动指示器时布局不会从 auth 变为 main？

Answer 1

我认为您可以使用调度道具进行加载。

例如当你调用 this.props.actions.auth(true);

您可以返回加载减速器。 handlePressEnter () {

    ...

    dispatch({ type:'loading', loading: true });

    jsonFetch(url, {

        method: 'POST',
        body: JSON.stringify({...}),

    }).then((value) => {

        dispatch({ type:'loading', loading: false });
        this.props.actions.auth(true);

    }).catch((errors) => {

        this.loadingState();
        console.log('Error while auth', errors);
    });
}

而且你可以使用

 <ActivityIndicator size="large" animating={this.props.loading} />

但不要忘记减速器返回