在不更改场景的React路由器v4本机中导航

Question

我正在为React Native应用程序使用React Router。我不确定我在这里遗漏了什么，但我安装了react-router-native并需要历史包，并设置了几个方法，这些方法只是将新路由推送到堆栈上，但什么都没有发生。我点击了(‘console.log’)；以检查它是否正在触发，但它不确定出了什么问题。

import React, { Component } from 'react';
import { View } from 'react-native';
import Splash from './Splash';
import createHistory from 'history/createMemoryHistory';

const history = createHistory();

class SplashContainer extends Component {
  goToLogin = () => {
    history.push('/Login');
  }
  goToRegister = () => {
    history.push('/SignUp');
  }
  render () {
    console.log(history)
    return (
      <Splash
        goToLogin={this.goToLogin}
        goToRegister={this.goToRegister}
      />
    );
  }
}

export default SplashContainer;

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Button } from 'native-base';
import { Link } from 'react-router-native';
import PropTypes from 'prop-types';

const Splash = (props) => {
  console.log(props)
  return (
    <View style={styles.container}>
      <Button light block onPress={props.goToLogin}>
        <Text>Login</Text>
      </Button>
      <Button dark block bordered style={{marginTop: 10}} onPress={props.goToRegister}>
        <Text>Register</Text>
      </Button>
    </View>
  );
}

Splash.propTypes = {
  goToLogin: PropTypes.func.isRequired,
  goToRegister: PropTypes.func.isRequired
}

export default Splash;

Answer 1

我不知道您的路由器配置，但您的方法应该是：

goToLogin = () => {
    const { history } = this.props
    history.push('/Login');
}

history将通过路由器堆栈中的组件道具向下传递。