使用 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 Native 上寻找像 react-router 这样的插件，您可以使用 react-native-router-flux，在此处可用：https://github.com/aksonov/react-native-router-flux.

此外，最好只在其中放置对函数的引用而不是调用它。类似于：

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

Answer 2

使用React Navigation。它是目前 React Native 最好和最简单的解决方案。

添加库使用npm install --save react-navigation

您可以使用 StackNavigator 为如下所示的路由定义 class。

     import {
          StackNavigator,
        } from 'react-navigation';

        const BasicApp = StackNavigator({
          Main: {screen: MainScreen},
          Profile: {screen: ProfileScreen},
      , {
headerMode: 'none',
}
    });

然后你可以像你在问题中提到的那样定义classes。例如：

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

    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()}
          />
        );
      }

}

navigate 函数可用于导航到 class，goBack 可用于返回屏幕。

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

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

使用 React-Native 进行路由

Routing with React-Native

javascript

url-routing

react-native

react-navigation