React-Native Navigator에서 소품/주 통과

Question

React Native newbie here.

본질적으로 여러 페이지로 구성된 접촉 양식 인 연습용으로 간단한 React Native 앱을 만들려고합니다. 여기 내 구성 요소에 소품을 할당하려고 할 때마다 나는 문제가 나는 네비게이터를 통해 그들을 렌더링있을 때 내 아이 구성 요소에 소품/상태를 전달하는 가장 좋은 방법을 알아내는 (navigatorRenderScene 기능)

에 봉착

, 그것은 문자열이나 함수 나 객체를 전달하지 못하게합니다. 예를 들어, 먼저 컴포넌트에서 문자열과 함수를 전달하려고합니다. 페이지가 렌더링되면 문자열 만 값을 유지합니다.

내가 완전히 잘못하고있는 건가요? Flux 나 Redux와 같은 국가 관리 시스템을 조사해야합니까? 아마 심지어 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' 

// 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

첫째, 내 인덱스

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); 

입니다 그리고 여기 예를 들어 구성 요소입니다. renderScene 소품을 네비게이터에 설정할 때 해당 함수를 실제 클래스에 바인딩하지 않으므로 navigatorRenderScene이 실행되면 범위가 testFunc과 같지 않습니다. 이 코드 라인을 변경

시도이 들어

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

:

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

화살표 기능이 클래스에 navigatorRenderScene 결합되며, 따라서 this.testFunc가 존재한다.

다른 옵션은 당신이 화살표 기능을 사용하지 않으려면

바인딩, 당신은 constructor이 같은 뭔가를 시도 할 수 할 수 있습니다.

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

은 또는 당신은 또한뿐만 아니라

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

콜백

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

또는 화살표 기능에 직접 bind 방법을 사용하여이 작동하는지 알려줘 수 있습니다. 행운을 빕니다!