3

我的应用程序react-native-router-flux用于根据用户是否是来决定向用户显示哪个组件

  • 登录，或等待应用连接到后端（显示<Loading />）
  • 登录（显示<Home />）
  • 未登录（显示<Welcome />）

实现这一目标的推荐方法是什么？

这个例子完美无缺，只是它没有使用react-native-router-flux. 无论如何修改代码以使用react-native-router-flux？

在我下面的尝试中，在调用函数Actions.loading()之前render调用会产生错误，因为Actions尚未定义。if语句可以在函数之后调用render吗？

此外，每次更新道具时，都会导致重新渲染App，从而给出有关场景键如何存在的错误。

import React, { Component } from 'react';
import Meteor, { createContainer } from 'react-native-meteor';
import { Actions } from 'react-native-router-flux';

import Home from './components/home';
import Welcome from './components/welcome';
import Loading from './components/loading';
import settings from './config/settings';


Meteor.connect(settings.METEOR_URL);


const App = (props) => {

    const { status, user, loggingIn } = props;

    if (status.connected == false || loggingIn) {
        // Render <Loading />
        Actions.loading();
    } else if (user !== null) {
        // Render <Home />
        Actions.home();
    } else {
        // Render <Welcome />
        Actions.welcome();
    }

    return (
        <Router>
            <Scene key="root">
                <Scene key="home" component={Home} title="Home" hideNavBar={true} />
                <Scene key="welcome" component={Welcome} title="Welcome" hideNavBar={true} />
                <Scene key="loading" component={Loading} title="Loading" hideNavBar={true} />
            </Scene>
        </Router>
    )
}


export default createContainer(() => {
    return {
        status: Meteor.status(),
        user: Meteor.user(),
        loggingIn: Meteor.loggingIn()
    };
}, App)

使用Dispatch组件的问题

根据 abeikverdi 的建议，我创建了以下Dispatch组件，其中包含显示组件之一的逻辑<Loading />，<Home />或<Welcome />。

问题：this.props.status.connected什么时候true（React Native 应用程序连接到 Meteor 后端），this.props.user总是null在 React Native 应用程序从 Meteor 后端接收到此数据之前一段时间。但是因为它最初被评估为null，所以Action.welcome()会被执行。this.props.user当最终null在一两秒后变为不并且用户应该被重定向到而不是时，这种行为是不正确的Actions.home()。

有任何想法吗？

export class Dispatch extends Component {
    constructor(props) {
        super(props);
    }

    componentWillUpdate() {
        if(this.props.status.connected == false) {
            Actions.loading();
        } else {
            console.log('meteor.user(): ', Meteor.user())
            if (this.props.user !== null) {
                Actions.home();
            } else {
                Actions.welcome();
            }
        }
    }

    render() {
        return (
            <View></View>
        )
    }
}


export default createContainer(() => {
    return {
        status: Meteor.status(),
        user: Meteor.user(),
        loggingIn: Meteor.loggingIn()
    };
}, Dispatch);

来自日志的错误/警告react-native log-android

以下是 React Native 应用程序在通过终止 Meteor 服务器断开它与 Meteor (DDP) 服务器之前启动一段时间后的 Android 日志输出。

使用console.log("<App /> render")，似乎每当在被Meteorrender传递 new 后再次调用该函数时，都会触发错误。propscreateContainerKey is already defined

无论如何要摆脱这个错误/警告？

12-23 02:27:01.875 31197 19338 I ReactNativeJS: Running application "RNapp" with appParams: {"initialProps":{},"rootTag"
:1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
12-23 02:27:01.891 31197 19338 I ReactNativeJS: render
12-23 02:27:01.995 31197 19338 I ReactNativeJS: Connected to DDP server.
12-23 02:27:01.999 31197 19338 I ReactNativeJS: Connected to DDP server.
12-23 02:27:02.012 31197 19338 I ReactNativeJS: render
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key home is already defined!
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key welcome is already defined!
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key loading is already defined!
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key root is already defined!
12-23 02:27:34.592 31197 19338 I ReactNativeJS: Disconnected from DDP server.
12-23 02:27:34.593 31197 19338 I ReactNativeJS: Disconnected from DDP server.
12-23 02:27:34.599 31197 19338 I ReactNativeJS: <App /> render
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key home is already defined!
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key welcome is already defined!
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key loading is already defined!
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key root is already defined!
12-23 02:27:34.609 31197 19338 I ReactNativeJS: <Loading /> render
12-23 02:27:35.603 31197 19338 I ReactNativeJS: Disconnected from DDP server.
12-23 02:27:35.613 31197 19338 I ReactNativeJS: <App /> render
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key home is already defined!
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key welcome is already defined!
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key loading is already defined!
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key root is already defined!
12-23 02:27:45.599 31197 19338 I ReactNativeJS: Disconnected from DDP server.
12-23 02:27:45.616 31197 19338 I ReactNativeJS: <App /> render
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key home is already defined!
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key welcome is already defined!
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key loading is already defined!
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key root is already defined!

App零件

export class App extends Component {

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.status.connected == false) {
            Actions.loading();
        } else {
            if (nextProps.user !== null) {
                Actions.home();
            } else {
                Actions.welcome();
            }
        }
    }


    render() {
       console.log('<App /> render')
        return (
            <Router>
                <Scene key="root">
                    <Scene key="home" component={Home} title="Home" hideNavBar={true} />
                    <Scene key="welcome" component={Welcome} title="Welcome" hideNavBar={true} />
                    <Scene key="loading" component={Loading} title="Loading" hideNavBar={true} />
                    <Scene key="profile" component={Profile} title="Home" hideNavBar={true} />
                    <Scene key="history" component={History} title="Home" hideNavBar={true} />
                    <Scene key="search" component={Search} title="Home" hideNavBar={true} />
                </Scene>
            </Router>
        )       
    }

}


export default createContainer(() => {
  return {
    status: Meteor.status(),
    user: Meteor.user(),
    loggingIn: Meteor.loggingIn(),
  };
}, App);
4

2 回答 2

2

您可以通过使用 initial prop 来实现这一点，您可以从存储中读取指示用户是否登录的数据，例如使用 access_token 。

然后你使用 initial={access_token} // 例如

但请记住，它将显示初始道具等于 true 的最后一个场景

// in componentDidMount
const currentUserAccessToken = store.getState().currentUserAccessToken;
        <Scene
            component={SignIn}
            hideNavBar
            initial={!currentUserAccessToken}
            key="signIn"
            title={I18n.t('sign_in')}
        />
于 2016-12-21T07:07:06.627 回答
1

您可以制作一个调度页面并将您的逻辑放在那里。因此，只需将 Dispatch 添加为场景，然后从那里导航。

return (
        <Router>
            <Scene key="root">
                <Scene key="dispatch" component={Dispatch} hideNavBar={true} initial={true} />
                <Scene key="home" component={Home} title="Home" hideNavBar={true} />
                <Scene key="welcome" component={Welcome} title="Welcome" hideNavBar={true} />
                <Scene key="loading" component={Loading} title="Loading" hideNavBar={true} />
            </Scene>
        </Router>
    )

更新：
似乎流星正在将这些参数传递给道具。一旦添加了新的道具，就componentWillUpdate()不会被触发。相反，您应该将导航逻辑Actions按componentWillReceiveProps(nextProps)如下方式放置：

componentWillReceiveProps(nextProps) {
    if(nextProps.status.connected == false) {
        Actions.loading();
    } else {
        console.log('meteor.user(): ', Meteor.user())
        if (this.props.user !== null) {
            Actions.home();
        } else {
            Actions.welcome();
        }
    }
}

那么你的导航逻辑应该在你的登录功能完成后被触发。这应该可以解决问题。

于 2016-12-21T03:02:06.773 回答