使用 React-Native 进行路由

Question

我有一个只有一个按钮的HomePage.js，登录按钮，单击时我想渲染LoginPage.js。我尝试了这样的事情，但它不起作用：

HomePage.js ：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
  constructor () {
    super();
    this.state = {LoginPage:false};
  }
  showLogin = () => {
     this.setState({LoginPage:true});
  }
  render() {
    return(
      <View>
        <TouchableOpacity onPress={() => this.showLogin()}>
          <Text>LogIn</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
export default HomePage;

在 React 中，它很容易用 react-router 完成，但我不知道如何使用 React-Native 来做到这一点。

EDIT 1 包含react-navigation后，我收到以下错误：Route 'navigationOptions' should declare a screen .我错过了什么吗？

App.js ：

import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';

const App = StackNavigator({
  Home: {screen: HomePage},
  LoginPage: {screen: LoginPage},
  navigationOptions: {
    header: () => null,
  }
});
export default App;

HomePage.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
          <Text>Login</Text>
        </TouchableOpacity>
        <Button
          onPress={() => navigate('LoginPage'), { name: 'Login' }}
          >Log In</Button>
      </View>
    )
  }
}

export default HomePage;

LoginPage.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class LoginPage extends Component {
    static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name,
    });
    render() {
        return (
      <View>
        <Text>This is login page</Text>
      </View>
        );
    }
}
export default LoginPage;

Answer 1

使用 React Navigation。它是目前反应本机的最佳和简单解决方案。

要添加库，请使用npm install --save react-navigation

您可以使用 StackNavigator 定义路由类，如下所示。

     import {
          StackNavigator,
        } from 'react-navigation';
        const BasicApp = StackNavigator({
          Main: {screen: MainScreen},
          Profile: {screen: ProfileScreen},
      , {
headerMode: 'none',
}
    });

然后，您可以定义问题中提到的类。例如：

class MainScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

和二等舱

    class ProfileScreen extends React.Component {
      static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name,
      });
      render() {
        const { goBack } = this.props.navigation;
        return (
          <Button
            title="Go back"
            onPress={() => goBack()}
          />
        );
      }
}

导航功能可用于导航到类，goBack 可用于返回屏幕。

要隐藏标题，您可以使用标题模式或在每个屏幕中指定导航选项

详情请参阅：https://reactnavigation.org/

Answer 2

如果你只是在寻找像 react-router 这样的插件在 React Native 上使用，你可以使用 react-native-router-flux ，可在此处获得：https://github.com/aksonov/react-native-router-flux。

此外，最好只是在其中引用该函数而不是调用它。像这样：

<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>