Передача реквизита/состояния в Реальном Навигаторе

Question

React Native новичок здесь.

Я пытаюсь создать простое приложение React Native для практики, которое по существу представляет собой многостраничную форму контакта.

У меня возникли проблемы, выясняя лучший способ передать реквизит/состояние моих дочерних компонентам, когда я делаю их с помощью навигатора (функция navigatorRenderScene)

Всякий раза, когда я пытаюсь присвоить реквизит моего компонента здесь , он позволяет мне передавать строку, но не функцию или объект. Например, в компоненте First, я пытаюсь передать строку и функцию. Только строка будет удерживать свое значение после отображения страницы.

Я делаю это совершенно неправильно? Нужно ли мне заглядывать в какую-то государственную систему управления, такую ​​как Flux или Redux? Может быть, даже пакет редукционного маршрутизатора? (Даже не коснулись их, если честно)

Маршрутизация - все отлично работает, это просто реквизит/состояние, которое я не могу понять.

Вот мой указательный

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Navigator, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} from 'react-native'; 

import { Container, Header, Title, Content, List, ListItem, InputGroup, Input, Button, Icon, Picker } from 'native-base' 

// a bunch of crap here being imported that I don't need, I'll trim it down later. 

import First from './components/First' 
import Second from './components/Second' 

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     text : 'initial state', 
     sentBy : '', 
     company : '', 
     phoneNumber : '' 
    }; 
    this.testFunc = this.testFunc.bind(this) 
    } 
    // end constructor 

    mostRecentPush() { 
    // firebase stuff, not really important to the problem 
    console.log('pushing input data to DB') 
    firebase.database().ref('mostRecent/').set({ 
     'body' : this.state.text, 
     'sentBy' : this.state.sentBy, 
     'location' : this.state.pickerValue, 
     'company' : this.state.company 
    }); 

    firebase.database().ref('emails/').push({ 
     'body' : this.state.text, 
     'sentBy' : this.state.sentBy, 
     'location' : this.state.pickerValue, 
     'company' : this.state.company 
    }) 
    } 
    // end mostRecentPush()/firebase stuff 

    onButtonPress() { 
    this.props.navigator.push({ 
     id: 'Second' 
    }) 
    } // end onButtonPress 

    testFunc() { 
    console.log('calling this from the index') 
    } 

    render() { 
    console.log('rendering home') 
    return (
     <Navigator 
      initialRoute = {{ 
      id: 'First' 
      }} 
      renderScene={ 
      this.navigatorRenderScene 
      } 
     /> 
    ) 
    } // end render 

    navigatorRenderScene(route, navigator) { 
    _navigator = navigator; 
    switch (route.id){ 
     case 'First': 
     return(<First testString="cat123" testFunc={this.testFunc} navigator={navigator} title="First" />) 
     // passing our navigator value as props so that the component has access to it 
     case 'Second': 
     return(<Second navigator={navigator} title="Second" />) 
     case 'Third': 
     return(<Third navigator={navigator} title="Third" />) 
     case 'Fourth': 
     return(<Fourth navigator={navigator} title="Fourth" />) 
     case 'Fifth': 
     return(<Fifth navigator={navigator} title="Fifth" />) 
    } //end switch 
    } // end navigatorRenderScene 
} // end component 

AppRegistry.registerComponent('App',() => App); 

А вот пример компонента, первый

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Navigator, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight 
} from 'react-native'; 

import { Container, Header, Title, Content, List, ListItem, InputGroup, Input, Button, Icon, Picker } from 'native-base' 

// too much stuff being imported, will clean this up later 

class First extends Component { 

    constructor(props) { 
    super(props) 
    this.onButtonPress = this.onButtonPress.bind(this) 
    } 

    onButtonPress() { 
    this.setState({ 
     text: 'changed state from first component' 
    }) 

    console.log(this.state) 

    this.props.navigator.push({ 
     id: 'Second' 
    }) 
    } 

    render() { 
    return(
     <Container> 
     {console.log('rendering first')} 
      <Content> 
       <List> 
        <ListItem> 
         <InputGroup> 
          <Input 
           placeholder='Name' 
          /> 
         </InputGroup> 
        </ListItem> 
       </List> 
       <TouchableHighlight onPress={this.onButtonPress}> 
        <Text>Go to Page 2</Text> 
       </TouchableHighlight> 
      </Content> 
     </Container> 
    ) 
    } 
} 


export default First 

Answer 1

Я думаю, что проблема это с размахом. При настройке renderScene prop на навигатор вы не привязываете эту функцию к фактическому классу, поэтому, когда выполняется navigatorRenderScene, область видимости не совпадает с областью testFunc.

Попробуйте изменить эту строку кода:

navigatorRenderScene(route, navigator) { 
    //... 
} 

Для этого:

navigatorRenderScene = (route, navigator) => { 
    // ... 
} 

Функция стрелка будет связывать navigatorRenderScene к классу, поэтому this.testFunc будет существовать там.

Другие варианты, чтобы сделать привязку

Если вы не хотите использовать функцию стрелки, вы можете попробовать что-то подобное в constructor.

// First options 
this.navigatorRenderScene = this.navigatorRenderScene.bind(this) 

Или вы можете также использовать метод bind непосредственно на обратный вызов

// Second option 
renderScene={ 
    this.navigatorRenderScene.bind(this) 
} 

или функции стрелки, а

// Third option 
renderScene={ 
    (route, navigator) => this.navigatorRenderScene(route, navigator) 
} 

Позвольте мне знать, если это работает. Удачи!