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

如果您只是想在{Reid Native>上使用react-router这样的插件，可以使用react-native-router-flux，此处可用：https://github.com/aksonov/react-native-router-flux。

此外，如果你只是在那里放置对函数的引用而不是调用它，它会更好。类似的东西：

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

使用React-Native进行路由

2 个答案: