Question

我正在创建一个滑动条，在那儿，我使用了react-redux库。当我调用包含redux代码的类时，它可以正常工作。我想在登录后显示此滑动条。因此，在有条件的情况下（如果用户登录成功，我将设置状态变量，则仅应呈现此页面），我试图调用显示空白页面的同一文件。我打印了控制台日志。我能够打印所有日志。但是在有条件的情况下，我无法加载数据。

我对react-redux不太了解。能帮我解决这个问题吗？

我的代码是

main.js,

import React, {Component} from 'react';
import {
  StyleSheet,
  Dimensions,
  Platform,
  View,
  StatusBar,
  DrawerLayoutAndroid,
} from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from '../Redux/reducers';
import { setNavigator, setActiveRoute } from "../Redux/actions";
import DrawerContent from '../Navigation/DrawerContent';
import Toolbar from '../Navigation/Toolbar';
import AppNavigation from '../Navigation/AppNavigation';
import { bgStatusBar, bgDrawer } from '../global.styles';

let store = createStore(reducer);
/* getDrawerWidth       Default drawer width is screen width - header width
* https://material.io/guidelines/patterns/navigation-drawer.html
*/
const getDrawerWidth = () => Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64);

export default class Main extends Component {
  constructor() {
    super();

    this.drawer = React.createRef();
    this.navigator = React.createRef();
  }

  componentDidMount() {
    store.dispatch(setNavigator(this.navigator.current));
  }

  openDrawer = () => {
    this.drawer.current.openDrawer();
  };

  closeDrawer = () => {
    this.drawer.current.closeDrawer();
  };

  getActiveRouteName = navigationState => {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
      return getActiveRouteName(route);
    }
    return route.routeName;
  };

  render() {
    return (
      <Provider store={store}>
        <DrawerLayoutAndroid
          drawerWidth={getDrawerWidth()}
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={
            () => <DrawerContent closeDrawer={this.closeDrawer} />
          }

          ref={this.drawer}
        >
          <View style={styles.container}>
            <StatusBar
                translucent

                animated
            />
            <Toolbar showMenu={this.openDrawer} />
            <AppNavigation
              onNavigationStateChange={(prevState, currentState) => {
                const currentScreen = this.getActiveRouteName(currentState);
                store.dispatch(setActiveRoute(currentScreen));
              }}
              ref={this.navigator}
            />
          </View>
        </DrawerLayoutAndroid>
      </Provider>
    );
  }
}

Login.js

import Main from './main';
render() {
    return (
      <View>
        {this.state.isLoggedIn ?
          <Main/>
        :
        <ChangePassword isUpdatePassword={this.state.isUpdatePassword} callLogin={this.callLogin}/>

    );
}

}

如果我只是在render方法中调用Main类，它将起作用。但这不适用于条件。

无法从react native

0 个答案: