Question

我使用React Router作为React Native应用程序。不知道我在这里缺少什么，但我安装react-router-native并需要历史包，并设置几个方法，只是将新路由推入堆栈但没有任何反应。我console.log（＆＃39;点击＆＃39;）;检查它是否会被解雇，这是不确定是什么错。

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将通过路由器堆栈内的组件道具向下传递。

在React Router v4中导航本机不更改场景

1 个答案: