Question

我试图通过父导航器上的右键调用子函数。

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

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

Answer 1

以下github问题对此进行了介绍：

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

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

目前最好的方法是在EventEmitter的所有者中创建NavigatorIOS，然后您可以使用route.passProps将其传递给孩子。孩子可以在Subscribable.Mixin中混合，然后在componentDidMount中，你可以
this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);
很明显，这个API需要改进。我们正在积极地在Relay中使用路由API，并希望反应路由器，但我们希望NavigatorIOS可以独立使用。也许我们应该在导航器对象中添加一个事件发射器，因此子组件可以订阅各种导航器活动：
this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

以下是一个实际例子：

'use strict';

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

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

首先，我们提出了所有要求，包括EventEmitter和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我们为导航器指定的组件。

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

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 mixin，我们唯一需要做的就是听取myRightBtnEvent组件发出的App并挂钩miscFunction它。 miscFunction将从App印刷机处理程序传递伪参数，以便我们可以使用它们来设置状态或执行其他操作。

你可以在RNPlay上看到这个的工作版本：

https://rnplay.org/apps/H5mMNQ

Answer 2

一个。在初始组件中

main:
    pushq   %rbp
    movq    %rsp, %rbp
    pushq   %rbx
    movl    $1, %ebx
    addl    $2, %ebx
    addl    $3, %ebx
    addl    $4, %ebx
    addl    $5, %ebx
    addl    $6, %ebx
    addl    $7, %ebx
    addl    $8, %ebx
    addl    $9, %ebx
    movl    %ebx, %eax
    popq    %rbx
    popq    %rbp
    ret

B中。在推动组件中在推送的组件中替换onRightButtonPress func。

this.props.navigator.push({
    title: 'title',
    component: MyComponent,
    rightButtonTitle: 'rightButton',
    passProps: {
        ref: (component) => {this.pushedComponent = component},
    },
    onRightButtonPress: () => {
        // call func
        this.pushedComponent && this.pushedComponent.myFunc();
    },
});

Answer 3

您可以使用flux，这是一个演示：https://github.com/backslash112/react-native_flux_demo

React Native - 来自NavigatorIOS的孩子的召唤功能

3 个答案: