リアクションネイティブナビゲータでの小道具/状態の受け渡し

Question

リアクションネイティブの初心者はここにあります。

私は、本質的に単なる複数ページの連絡フォームである簡単な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) => { 
    // ... 
} 

矢印機能は、したがってthis.testFuncが存在しますが、クラスにnavigatorRenderSceneをバインドします。結合

を行うには

その他のオプションは、矢印機能を使用したくない場合は、constructorにこのような何かを試みることができます。

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

またはあなたはまた、コールバック

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

または矢印機能だけでなく

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

これが動作するかどうか、私に教えてくださいに直接bindメソッドを使用することができます。がんばろう！