Question

我正在尝试从React Native中的nagivation Bar访问特定js（我本地的chat.js）文件中的函数。

Naviagation Bar在index.ios.js中说明，代码如下。

render() {
     ....
    <Navigator
        initialRoute={{ title: 'Log In Page', index: 0, component: FirstPage }}

        configureScene={() => {
          return Navigator.SceneConfigs.FloatFromRight;
        }}

    navigationBar={
      <Navigator.NavigationBar
        routeMapper={{
            LeftButton: (route, navigator, index, navState) =>
            {
              if (route.index === 0) {
                return null;
              } else {
                return (
                  <TouchableHighlight onPress={() => navigator.pop()}>
                    <Text style={styles.route_title}> Back </Text>
                  </TouchableHighlight>
                );
              }
            },

            RightButton: (route, navigator, index, navState) =>
            {
              if (route.index === 10000){
                return (<Text>Done</Text>);
              }else{
                return null;
              }
            },   

            Title: (route, navigator, index, navState) =>
              { return (<Text style={styles.route_title}> {route.title} </Text>); },
          }}
        style={{backgroundColor: '#28b496'}} />
    }
 ...

当我点击页面中的“后退”（chat.js）时，我想执行chat.js文件中所述的特定功能，例如pusher.unsubscribe('test_channel');。

如何在React-native中从顶部访问内部函数？我期待在这件事上看到任何意见！

最佳

Answer 1

导出此功能然后将其导入索引文件

Answer 2

为了达到这个目的，你可以使用＆＃39; navigator＆＃39;参数。您可以通过此参数访问组件的功能。您可以使用下面的结构访问它

首先在Navigator组件中编写一个方法

 <Navigator initialRoute =  {{name:'home'}}
       renderScene  =  {this.renderScene.bind(this)} 
       navigationBar = {<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} style={styles.navBar}/>}
       callerFunction=   {() => this.yourFunctionName()} // this is what you should add
                />

然后为此方法分配您要调用的函数

然后你可以通过这个callBack函数（callerFunction）访问你的函数。

{navigator.props.callerFunction()}

定义您也可以发送参数。

如何从React Native中的导航栏访问特定js文件中的函数？

2 个答案: