React-Nativeによるルーティング

Question

HomePage.jsボタンが1つのみで、ログインボタンがあり、クリックしたときにレンダリングしたい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-routerで行われていますが、私が反応-ネイティブでそれを行う方法がわからない反応します。

EDIT 1react-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を使用してください。今すぐ反応するための最高の簡単なソリューションです。あなたはStackNavigatorを使用して以下のようにルーティングするためのクラスを定義することができ、ライブラリの使用npm install --save react-navigation

を追加するための

。

 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のバックスクリーンに行くために使用することができるために使用することができます。

uは詳細ご参照ください

をヘッダーモードを使用するか、各画面でのナビゲーションオプションを指定することができ、ヘッダーを非表示にする場合：https://reactnavigation.org/

Answer 2

あなただけのネイティブに反応に使用するreact-routerなどのプラグインを探しているなら、あなたはreact-native-router-fluxを使用することができます、avaここにilable：https://github.com/aksonov/react-native-router-flux。

また、関数を呼び出すのではなく、その関数への参照を入れるだけの方がよいでしょう。次のようなものがあります。

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