从表示组件触发 React-native-router-flux，或将 React 本机路由器 flux 函数作为 pr

Question

>我正在使用反应原生路由器通量在应用程序中进行导航，我有一个容器文件夹和一个组件文件夹，我在其中创建了一个按钮组件。

这是我在容器文件夹中的 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,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} />
/>

如何将导航函数作为道具传递给按钮组件，以便 onPressButton 触发导航？

Answer 1

哇！问这个问题我真的觉得很愚蠢。我不必要地想太多了。我什至不需要制作额外的功能。我需要做的就是将 {Actions.verify} 传递给 onPressButton 道具，并将 proptype 验证作为表示组件中的函数保留。第二种方法是在我的onPressButton函数中返回Actions.verify((，而不是返回((=>Actions.verify((。

下面我完全删除了onPressButton函数，只是在{Actions.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,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>
        );
    }
}