Reactjs 从呈现组件触发react本机路由器流量，或将react本机路由器流量功能作为道具传递给组件

我在应用程序中使用react native router flux进行导航，我有一个容器文件夹和一个组件文件夹，我在其中创建了一个按钮组件

这是我在容器文件夹中的Register.js文件，我还有一个Verify.js文件，它只呈现“hello world”

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

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput，StyleSheet}；
从“react native router flux”导入{Actions}；
从“../../components/Button/Button”导入按钮；
从“../../styles/styles”导入样式；
导出默认类寄存器扩展组件{
构造函数（）{
超级（）；
this.onPressButton=this.onPressButton.bind（this）；
}
按按钮（）{
return（）=>Actions.verify（）；
}
render（）{
返回(
输入您的手机号码
);
}
}

按钮组件在下面

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，PropTypes}来自'React'；
从“react native”导入{View，Text，TouchableHighlight，StyleSheet}；
导出默认类按钮扩展组件{
静态支撑类型={
text:PropTypes.string.isRequired，
ON按钮：需要PropTypes.func
};
render（）{
返回(
{this.props.text}
);
}
}

此外，下面是我的应用程序文件的节略路由，只是为了显示场景，我想路由从和到

<Scene key="root">

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

/>

/>

---

如何将导航功能作为道具传递给按钮组件，以便按下按钮触发导航？

哇！问这个问题我真的很傻。我想得太多了。我甚至不需要做额外的功能。我所需要做的就是将{Actions.verify}传递给onPressButton属性，并将属性类型验证作为presentational组件中的一个函数。第二种方法是在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>
        );
    }
}

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput，StyleSheet}；
从“react native router flux”导入{Actions}；
从“../../components/Button/Button”导入按钮；
从“../../styles/styles”导入样式；
导出默认类寄存器扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
输入您的手机号码
);
}
}

在演示文档中，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，PropTypes}来自'React'；
从“react native”导入{View，Text，TouchableHighlight，StyleSheet}；
导出默认类按钮扩展组件{
静态支撑类型={
text:PropTypes.string.isRequired，
ON按钮：需要PropTypes.func
};
render（）{
返回(
{this.props.text}
);
}
}

第二条路

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

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput，StyleSheet}；
从“react native router flux”导入{Actions}；
从“../../components/Button/Button”导入按钮；
从“../../styles/styles”导入样式；
导出默认类寄存器扩展组件{
构造函数（）{
超级（）；
this.onPressButton=this.onPressButton.bind（this）；
}
按按钮（）{
返回操作。verify（）；
}
render（）{
返回(
输入您的手机号码
);
}
}