Question

我正在创建一个带有身份验证的简单应用程序。要使用带有反应本机导航（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();

商店正在监听更新，并在需要时更改应用程序布局。

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模拟器启动应用程序，并尝试进行身份验证。它向我显示活动指示器，然后指示器消失，但布局没有改变。而且奇怪的行为是，如果我在this.loadingState(true);布局中评论this.loadingState();和auth.js就会成功。

有人可以向我解释，为什么使用活动指示器时布局不会从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} />

但不要忘记减速器返回

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

1 个答案: