Routing mit React-Native

Question

Ich habe eine HomePage.js mit nur einer Schaltfläche, Login Button, und wenn ich geklickt habe, möchte ich LoginPage.js rendern. Ich habe versucht, so etwas wie diese, aber es funktioniert nicht:

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; 

In React es leicht mit react-router getan, aber ich weiß nicht, wie es zu tun mit React-Ureinwohner.

EDIT 1 nach einschließlich react-navigation Ich bekomme den folgenden Fehler: Route 'navigationOptions' should declare a screen. Habe ich etwas verpasst?

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

Verwenden Sie React Navigation. Es ist die beste und einfachste Lösung, um sofort reagieren zu können.

zum Hinzufügen der Bibliothek Verwendung npm install --save react-navigation

Sie Klasse für das Routing wie unter Verwendung eines StackNavigator definieren können.

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

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

Dann können Sie Klassen definieren wie die, die Sie in der Frage erwähnt haben. zB:

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

und zweite Klasse

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

} 

die Navigate-Funktion kann für die Navigation zu einer Klasse verwendet werden und goBack kann gehen zurück auf einen Bildschirm verwendet werden.

Für den Kopf versteckt u kann Header-Modus verwenden oder Navigationsoptionen in jedem Bildschirm

Einzelheiten angeben siehe auch: https://reactnavigation.org/

Answer 2

Wenn Sie gerade für ein Plugin wie react-router Suche auf React Eingeborener zu verwenden, können Sie react-native-router-flux verwenden , ava hier erhältlich: https://github.com/aksonov/react-native-router-flux.

Auch ist es besser, wenn Sie nur einen Verweis auf die Funktion in dort setzen, anstatt sie aufzurufen. Etwas wie:

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