Как получить доступ к функции или методу js-файла из navigationBar в React Native?

Question

Я хочу вызвать функцию под названием «test()», которая указана внутри Main.js. Особенно функция test() обновит состояние somestate внутри Main.js, и я поставлю консольный журнал, чтобы узнать, что происходит.

Когда индекс маршрута равен 1, как указано ниже, применяется конфигурация leftButton (которая выполняется в index.ios.js) (поэтому она становится «click!»). Когда я нажимаю на это, появляется сообщение об ошибке, говорящее: Main.test не является функцией.

Есть ли способ доступа к функции test() внутри Main.js при нажатии кнопки «leftButton» в навигаторе во время пребывания в Main.js?

Должен ли я что-то делать внутри 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 является Реагировать компонент - в этом случае вы не можете вызвать метод испытания непосредственно, если вы не экземпляр этого компонента и получить доступ к нему (например, this.refs.main.test()).

Я настоятельно рекомендую извлечь метод тестирования, чтобы он не был специфичным для компонента или не статичным.

В случае, если ни один из выше возможно, вы могли бы попробовать рендеринга Main в ниже <Navigator /> и использование рефов:

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

и доступ к методу с использованием рефов, как предложено в начале ответа.

Однако, если ваш компонент Main уже находится в дереве (например, это ваш компонент parent), вы можете использовать context и передать этот метод как часть его.