запускать react-native-router-flux из презентационных компонентов или передавать функции react native router flux компонентам в качестве реквизита

Я использую реагирующий собственный поток маршрутизатора для навигации в приложении, у меня есть папка контейнера и папка компонентов, в которой я создал компонент кнопки.

Это мой файл 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 запускал навигацию?


react-native reactjs react-native-router-flux
person Teddy McZieuwa    schedule 31.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ух ты! Я действительно чувствую себя глупо, задавая этот вопрос. Я зря все обдумывал. Мне даже не нужно было делать дополнительную функцию. Все, что мне нужно было сделать, это передать {Actions.verify} реквизиту onPressButton и сохранить проверку типа реквизита как функцию в презентационном компоненте. второй способ состоял в том, чтобы вернуть Actions.verify() в моей функции onPressButton вместо возврата ()=>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>
        );
    }
}
person Teddy McZieuwa    schedule 31.03.2017