觸發react-native-router-flux從演示組件或傳遞反應本地路由器通量功能組件作爲道具

Question

我正在使用反應原生路由器通量爲我的導航應用程序中，我有容器文件夾和組件文件夾中我創建了一個按鈕組件。

這是容器文件夾我的Register.js文件，我也有一個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> 
     ); 
    } 
} 

此外，下面是我的路由節略應用程序文件，只是爲了顯示我想從中路由的場景。

<Scene key="root"> 

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

/> 

如何將我的導航功能作爲道具傳遞給Button組件，以便onPressButton觸發導航？

Answer 1

哇！我問這個問題真的很愚蠢。我是不必要的過度思考的事情。我甚至不需要額外的功能。我所需要做的就是將一個{Actions.verify}傳遞給onPressButton支撐，並將proptype驗證作爲函數保存在表示組件中。第二種方法是在我的onPressButton函數中返回Actions.verify（），而不是返回（）=> 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> 
     ); 
    } 
}