React Antial InitalRoutename无法与堆栈导航一起使用



我是React-Native的新手,我正在尝试使用stackNavigation和React-Redux实现一个简单的应用程序,并带有欢迎和注册屏幕。我已经使用StackNavigation配置了两个屏幕,但是出于某些原因,仅在应用程序启动时弹出注册屏幕。以下是我的文件:

index.js

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp', () => App);

app.js

import React, { Component } from 'react';
import { Provider, connect } from "react-redux";
import { addNavigationHelpers } from "react-navigation";
import StackNavConfig from "./js/config/routes";
import getStore from "./js/store";
const AppNavigator = StackNavConfig;
const initialState = AppNavigator.router.getActionForPathAndParams('Welcome');
const navReducer = (state = initialState, action) => {
    const newState = AppNavigator.router.getStateForAction(action, state);
    return newState || state;
};
const AppWithNavigationState = connect(state => ({
    nav: state.nav,
}))(({ dispatch, nav }) => (
    <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
));
const store = getStore(navReducer);
class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}
export default App;

JS/config/coundes.js

import Welcome from "../components/Welcome/view/Welcome";
import SignUp from "../components/SignUp/view/SignUp";
import { StackNavigator } from "react-navigation";
const Routes = {
    Welcome: { screen: Welcome , path: ''},
    SignUp: { screen: SignUp , path : '/signup'},
};
const RoutesConfig = {
    initialRouteName: 'Welcome',
    headerMode: 'none',
};
export default StackNavConfig = StackNavigator(Routes, RoutesConfig);

store.js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import getRootReducer from "./reducers/index";
export default function getStore(navReducer) {
    const store = createStore(
        getRootReducer(navReducer),
        undefined,
        applyMiddleware(thunk)
    );
    return store;
}

下面是我的组件欢迎.js

import React from 'react';
import {  
  View, 
  Image} from 'react-native'; 
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as welcomeActions from "../actions/WelcomeActions";
import { welcomeStyles } from '../styles/WelcomeStyles';
class Welcome extends React.Component {
  constructor(){
    super();
    this.state = {  };
  }
  render(){
    return (
      <View style = {welcomeStyles.mainContainer}>
         <Text>Welcome</Text>
      </View>      
    ); 
  }
}    
export default connect(
  state => ({
  }),
  dispatch => bindActionCreators(welcomeActions, dispatch)
)(Welcome);

Ingip.js

import React from 'react';
import {  
  View, 
  Image} from 'react-native'; 
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as welcomeActions from "../actions/SignUpActions";
import { signUpStyles } from '../styles/SignUpStyles';
class Welcome extends React.Component {
  constructor(){
    super();
    this.state = {  };
  }
  render(){
    return (
      <View style = {signUpStyles.mainContainer}>
         <Text>SignUp</Text>
      </View>      
    ); 
  }
}    
export default connect(
  state => ({
  }),
  dispatch => bindActionCreators(signUpActions, dispatch)
)(SignUp);

我也有每个组件的动作和还原文件。但是到目前

import { combineReducers } from "redux";
import welcomeReducer from "../components/Welcome/reducers/WelcomeReducer";
import signUpReducer from "../components/SignUp/reducers/SignUpReducer";
export default function getRootReducer(navReducer) {
    return combineReducers({
        nav: navReducer,
        welcomeReducer : welcomeReducer,
        signUpReducer : signUpReducer,
    });
}

如前所述,即使设置了initialRoutEname在我的路由中欢迎,每次我启动app 时,注册屏幕都会出现。请帮助

我发现了什么问题。我在渲染函数内部错误地呼叫this.props。

相关内容

  • 没有找到相关文章

最新更新