triggern-native-router-flux von darstellenden komponenten oder übergang reagieren native router flux funktionen zu komponenten als requisiten

Question

ich benutze reagieren native router flux für meine navigation in einer app, ich habe container ordner und eine komponente ordner, in denen ich erstellt eine Button-Komponente.

Dies ist meine Register.js Datei im Container Ordner, ich habe auch eine Verify.js-Datei, die nur eine ‚Hallo Welt‘ macht

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

Die Button-Komponente ist unter

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

Unten ist auch meine gekürzte App-Datei für das Routing, nur um die Szenen anzuzeigen, die ich von und zu routen möchte.

<Scene key="root"> 

     <Scene key="register" title="Register" hideNavBar component={Register} /> 
     <Scene key="verify" title="Verify" hideNavBar component={Verify} /> 

/> 

Wie übergebe ich meine Navigationsfunktion als Requisite an die Button-Komponente, so dass der onPressButton die Navigation auslöst?

Answer 1

Wow! Ich bin wirklich dumm, diese Frage zu stellen. Ich dachte unnötig über Dinge nach. Ich musste nicht einmal extra arbeiten. Alles, was ich tun musste, war, ein {Actions.verify} an die Property onPressButton zu übergeben und die Validierung des Proptyps als Funktion in der Präsentationskomponente beizubehalten. Eine zweite Möglichkeit war, Actions.verify() in meiner onPressButton-Funktion zurückzugeben, anstatt() => Actions.verify() zurückzugeben.

Unten habe ich die onPressButton-Funktion vollständig entfernt und einfach {Actions.verify} übergeben, wobei verify der Schlüssel ist, der an meine Komponentenszene übergeben wurde.

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

Im vorliegenden Dokument bleibt die Proptypvalidierung gleich.

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

Der zweite Weg

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