React Native - 从 NavigatorIOS 调用子函数

问题描述

我正在尝试从父导航器上的右侧按钮调用子函数.

I am trying to call a child function from the right button on the parent navigator.

我需要的基本代码示例如下:

A basic code example of what I need is as follows:

Main.js

<NavigatorIOS
    style={styles.container}
    initialRoute={{
        title: 'Test',
        component: Test,
        rightButtonTitle: 'Change String',
        onRightButtonPress: () => ***I Want to call miscFunction from here*** ,
        passProps: {
            FBId: this.state.fbidProp,
            favsPage: true
        }
    }}/>

Test.js

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            variable: 'some string'
        };
    }
    miscFunction(){
        this.setState({
            variable: 'new string'
        };
    }
    render(){
        return(
            <Text> {variable} </Text>
        )
    }
}

推荐答案

这在以下 github 问题中有介绍:

This is covered in the following github issue:

https://github.com/facebook/react-native/issues/31

Eric Vicenti 评论描述了 Facebook 如何在内部解决这个问题:

Eric Vicenti comments to describe how Facebook solves this internally:

目前最好的方法是在 NavigatorIOS 的所有者中创建一个 EventEmitter，然后您可以使用 route 将其传递给孩子.通行证.孩子可以在Subscribable.Mixin中混合，然后在componentDidMount中，你可以

this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);

很明显，这个 API 需要改进.我们正在 Relay 中积极工作路由 API，并希望使用 react-router，但我们希望 NavigatorIOS 能够独立使用.也许我们应该在 navigator 对象中添加一个事件发射器，以便子组件可以订阅各种 navigator 活动:

It is clear that this API needs improvement. We are actively working the routing API in Relay, and hopefully react-router, but we want NavigatorIOS to be usable independently. Maybe we should add an event emitter inside the navigator object, so child components can subscribe to various navigator activity:

this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

以下是实际示例中的样子:

Here's how this looks in a practical example:

'use strict';

var React = require('react-native');
var EventEmitter = require('EventEmitter');
var Subscribable = require('Subscribable');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS
} = React;

首先，我们引入所有需求，包括 EventEmitter 和 Subscribable.

First we pull in all of our requirements including the EventEmitter and Subscribable.

var App = React.createClass({
    componentWillMount: function() {
        this.eventEmitter = new EventEmitter();
    },

    onRightButtonPress: function() {
        this.eventEmitter.emit('myRightBtnEvent', { someArg: 'argValue' });
    },

    render: function() {
        return <NavigatorIOS
                style={styles.container}
                initialRoute={{
                    title: 'Test',
                    component: Test,
                    rightButtonTitle: 'Change String',
                    onRightButtonPress: this.onRightButtonPress,
                    passProps: {
                        events: this.eventEmitter
                    }
                }}/>
    }
});

在我们的主要顶级组件中，我们创建了一个新的 EventEmitter(在 componentWillMount 中)以供整个组件使用，然后使用 passProps 将其传递给我们为导航器指定的 Test 组件.

In our main top-level component, we create a new EventEmitter (in componentWillMount) to be available across the component, and then use passProps to pass it down to the Test component we specify for the navigator.

我们还为右键按下定义了一个处理程序，当按下该按钮时，它会发出带有一些虚拟参数的 myRightBtnEvent.现在，在 Test 组件中:

We also define a handler for the right button press, which emits a myRightBtnEvent with some dummy arguments when that button is pressed. Now, in the Test component:

var Test = React.createClass({
    mixins: [Subscribable.Mixin],

    getInitialState: function() {
        return {
            variable: 'original string'
        };
    },

    componentDidMount: function() {
        this.addListenerOn(this.props.events, 'myRightBtnEvent', this.miscFunction);
    },

    miscFunction: function(args){
        this.setState({
            variable: args.someArg
        });
    },
    render: function(){
        return(
            <View style={styles.scene}><Text>{this.state.variable}</Text></View>
        )
    }
});

我们添加了 Subscribable 混合，我们唯一需要做的就是监听 App 触发的 myRightBtnEvent组件并将 miscFunction 挂接到它.miscFunction 将从 App 新闻处理程序中传递虚拟参数，以便我们可以使用它们来设置状态或执行其他操作.

We add the Subscribable mixin, and the only other thing we need to do is listen out for the myRightBtnEvent being fired from the App component and hook miscFunction up to it. The miscFunction will be passed the dummy arguments from the App press handler so we can use those to set state or perform other actions.

您可以在 RNPlay 上看到它的工作版本:

You can see a working version of this on RNPlay:

https://rnplay.org/apps/H5mMNQ

这篇关于React Native - 从 NavigatorIOS 调用子函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！