使用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来完成。

包括react-navigation之后的EDIT 1我得到以下错误： 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 react-router这样的插件以在React Native上使用，则可以使用react-native-router-flux ，可从以下位置获得： https : //github.com/aksonov/react-native-router-flux 。

另外，最好是在其中放置对函数的引用而不是调用它。 就像是：

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