Question

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

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

另外，下面是我的删节应用程序文件，用于显示我想要路由到的场景。

<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 prop，并将proptype验证作为演示组件中的函数。第二种方法是在我的onPressButton函数中返回Actions.verify（）而不是return（）=＆gt; 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>
        );
    }
}

从表示组件触发react-native-router-flux或将本机路由器通量函数作为props

1 个答案: