Question

我想调用一个名为'test（）'的函数，该函数在Main.js中声明。特别是test（）函数将更新Main.js中somestate的状态，并且我将控制台日志设置为查看正在发生的事情。

当路由索引为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()），否则不能直接调用测试方法。

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

如果上述情况都不可能，您可以尝试在Main下面使用refs来渲染<Navigator />：

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

并使用参考开头提出的refs访问方法。

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

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

1 个答案: