如何在React Native中从NavigationBar访问js文件的函数或方法？

Question

我想调用Main.js内部声明的名为“ test（）”的函数。 特别是test（）函数将更新Main.js内somestate的状态，并且我将控制台日志放入日志中以查看发生了什么。

当route的索引为1时，如下所述，将应用leftButton配置（在index.ios.js中完成）（因此它变为'click！'）。 当我单击此按钮时，将显示一条错误消息，说Main.test不是函数。

当我停留在Main.js中的导航器中单击“ leftButton”时，是否可以通过这种方法访问Main.js中的test（）函数？

我是否必须在index.ios.js或Main.js内做一些事情？ 请与我分享任何想法！ （：

下面是我的代码片段（index.ios.js和Main.js）

///////////////////////////////////////////////////// //////////////

...
var Main = require('./Main');
...
render() {

    return (
        <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 if(route.index ===1) {
                  return (
                    <TouchableHighlight onPress={() =>  {  Main.test()  } } >
                        <View style={styles.back}>
                          <Text>click!</Text>
                        </View>
                    </TouchableHighlight>
                  );  
                } else{
                  return (
                    <TouchableHighlight onPress={() => {navigator.pop();     console.log('ended..'); }}>
                      <View style={styles.back}>
                        <Text>Click</Text>
                      </View>
                    </TouchableHighlight>
                  );
                }
              },

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

        renderScene={(route, navigator) => React.createElement(route.component, { ...route.passProps, navigator })}
        style={{padding: 0}}  />

      );

  }

///////////////////////////////////////////////////// //////////////

..

class Main extends Component {

  constructor(props) {
    super(props);
    ..
  }

  test(){
   console.log('I wish this will be triggered!');
   console.log('This is the function that I want to call');
   this.setState({
     somestate: 'change to this man'
   });
  }

  render(){
     return(
     <Text>HI</Text>
     );
  }

...
module.exports = Main;

///////////////////////////////////////////////////// //////////////

Answer 1

看起来Main是一个React组件-在这种情况下，除非实例化该组件并访问对该组件的引用（例如this.refs.main.test() ），否则您无法直接调用测试方法。

我强烈建议提取测试方法，以使它不是特定于组件或使其静态的。

如果以上都不可行，您可以尝试在<Navigator />下面渲染Main并使用refs：

render() {
  return (
    <View>
       <Navigator />
       <Main ref="main" />
    </View>
  );
}

并使用答案开头建议的refs访问该方法。

但是，如果您的Main组件已经在树中（例如，它是您的parent组件），则可以使用context并将该方法作为其一部分传递。