プレゼンテーションコンポーネントからネイティブルータフラックスをトリガする、またはネイティブルータフラックス機能をコンポーネントとコンポーネントとして反応させる

Question

私はアプリケーションネゴシエーションのためにネイティブルータフラックスを使用しています。コンテナフォルダとコンポーネントフォルダがあります。ボタンコンポーネントが作成されました。

これは、コンテナフォルダ内の私のRegister.jsファイルですが、私はまた、唯一の 'Hello Worldの' をレンダリングするVerify.jsファイルを持っている

import React, { Component } from 'react'; 
import { View, Text, TextInput,StyleSheet} from 'react-native'; 
import {Actions} from 'react-native-router-flux'; 

import Button from '../../components/button/Button'; 

import styles from '../../styles/styles'; 


export default class Register extends Component{ 

    constructor(){ 
     super(); 

     this.onPressButton = this.onPressButton.bind(this); 
    } 

    onPressButton(){ 
     return()=>Actions.verify(); 
    } 

    render() { 
     return (
      <View style={styles.global}> 

       <View style={styles.registerContainer}> 
        <Text style={styles.registerText}>Input your mobile number</Text> 
       </View> 

       <View style={styles.inputRow}> 
        <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/> 
        <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/> 
       </View> 
       <Button text="REGISTER" onPressButton={this.onPressButton}/> 
      </View> 
     ); 
    } 
} 

Buttonコンポーネントは

import React,{Component,PropTypes} from 'react'; 
import {View,Text,TouchableHighlight,StyleSheet} from 'react-native'; 

export default class Button extends Component{ 
    static propTypes={ 
     text: PropTypes.string.isRequired, 
     onPressButton: PropTypes.func.isRequired 
    }; 

    render(){ 
     return(

      <TouchableHighlight onPress={this.props.onPressButton}> 
       <View style={styles.btn}> 
        <Text style={styles.btn_text}>{this.props.text}</Text> 
       </View> 
      </TouchableHighlight> 
     ); 
    } 
} 

を下回っています

また、ルーティングのための私の要約されたappファイルは、私が出入りしたいシーンを表示するだけです。

どのようにして、ナビゲーション機能をボタンコンポーネントに渡して、onPressButtonがナビゲーションをトリガーするのですか？

Answer 1

うわー！私は本当にこの質問をするのは気が気にしない。私は不必要に物事を考えすぎた。私は余分な機能を必要としなかった。私がする必要があったのは、{Actions.verify}をonPressButtonのpropに渡し、proptypeの検証をpresentationalコンポーネントの関数として保持することでした。 2番目の方法は、return（）=> Actions.verify（）の代わりに、私のonPressButton関数でActions.verify（）を返すことでした。

以下では、onPressButton関数を完全に削除し、{Actions.verify}に渡しました。ここで、verifyはコンポーネントのシーンに渡されるキーです。

import React, { Component } from 'react'; 
import { View, Text, TextInput,StyleSheet} from 'react-native'; 
import {Actions} from 'react-native-router-flux'; 

import Button from '../../components/button/Button'; 

import styles from '../../styles/styles'; 


export default class Register extends Component{ 

    constructor(){ 
     super(); 
    } 


    render() { 
     return (
      <View style={styles.global}> 

       <View style={styles.registerContainer}> 
        <Text style={styles.registerText}>Input your mobile number</Text> 
       </View> 

       <View style={styles.inputRow}> 
        <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/> 
        <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/> 
       </View> 
       <Button text="REGISTER" onPressButton={Actions.verify}/> 
      </View> 
     ); 
    } 
} 

このドキュメントでは、proptype検証は同じです。

import React,{Component,PropTypes} from 'react'; 
import {View,Text,TouchableHighlight,StyleSheet} from 'react-native'; 

export default class Button extends Component{ 
    static propTypes={ 
     text: PropTypes.string.isRequired, 
     onPressButton: PropTypes.func.isRequired 
    }; 

    render(){ 
     return(

      <TouchableHighlight onPress={this.props.onPressButton}> 
       <View style={styles.btn}> 
        <Text style={styles.btn_text}>{this.props.text}</Text> 
       </View> 
      </TouchableHighlight> 
     ); 
    } 
} 

第二の方法

import React, { Component } from 'react'; 
import { View, Text, TextInput,StyleSheet} from 'react-native'; 
import {Actions} from 'react-native-router-flux'; 

import Button from '../../components/button/Button'; 

import styles from '../../styles/styles'; 


export default class Register extends Component{ 

    constructor(){ 
     super(); 

     this.onPressButton = this.onPressButton.bind(this); 
    } 

    onPressButton(){ 
     return Actions.verify(); 
    } 

    render() { 
     return (
      <View style={styles.global}> 

       <View style={styles.registerContainer}> 
        <Text style={styles.registerText}>Input your mobile number</Text> 
       </View> 

       <View style={styles.inputRow}> 
        <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/> 
        <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/> 
       </View> 
       <Button text="REGISTER" onPressButton={this.onPressButton}/> 
      </View> 
     ); 
    } 
}