React native React本机initalRouteName不使用堆栈导航_React Native_React Redux_Stack Navigator

React native React本机initalRouteName不使用堆栈导航

react-native

React native React本机initalRouteName不使用堆栈导航,react-native,react-redux,stack-navigator,React Native,React Redux,Stack Navigator,我是react native的新手，我正在尝试使用StackNavigation和react redux实现一个简单的应用程序，其中包括欢迎屏幕和注册屏幕。我使用StackNavigation配置了两个屏幕，但由于某些原因，当应用程序启动时，只有注册屏幕弹出。以下是我的档案： Index.js import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('My

我是react native的新手，我正在尝试使用StackNavigation和react redux实现一个简单的应用程序，其中包括欢迎屏幕和注册屏幕。我使用StackNavigation配置了两个屏幕，但由于某些原因，当应用程序启动时，只有注册屏幕弹出。以下是我的档案：

Index.js

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

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;

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);

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;
}

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);

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);

App.js

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

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;

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);

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;
}

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);

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);

store.js

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

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;

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);

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;
}

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);

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);

下面是我的组件 Welcome.js

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

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;

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);

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;
}

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);

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);

如前所述，即使在my routes.js中将initialRouteName设置为Welcome之后，每次启动应用程序时都会首先出现注册屏幕。请帮忙
我发现了问题所在。我在渲染函数中错误地调用了this.props.navigate，导致导航到不同的屏幕。
您的路线中需要“路径”吗？试着摆脱它，看看它是否有帮助。我删除了路径。我不需要它们。问题是由于在组件呈现方法内执行this.props.navigate造成的