ネイティブ・パス・プロップを別のコンポーネントに反応させる

Question

私はあるコンポーネントから別のコンポーネントに値を渡すのに苦労しています。私は、タブナビゲータを使用して、ここで私のアプリの設定だよreact-native tab navigator search box

：

index.js（タブの設定をレンダリング）

ルータそれは部分的に解決された前の質問から問題の続きです。 JS

searchHeader.js

tab1.js

タブ2.js

などのタブが、私は、タブの名前を取得しています変更されindex.jsで

。それをsearchHeader.jsに渡して、プレースホルダテキストを更新したいと思います。

searchHeader.jsは直接の子ではなくindex.jsにインポートされません。どのように値を渡すのですか？あなたはおそらくsetParamsメソッドを使用してnavigation propとしてそれを渡すことができ

index.js

import React, { Component } from 'react'; 
import { Root, Tabs } from './config/router'; 
import { Alert,View } from 'react-native'; 

class App extends Component { 


constructor(props) { 
super(props); 
this.state = { 
searchText: '', 
} 
} 

_getCurrentRouteName(navState) { 

if (navState.hasOwnProperty('index')) { 
    this._getCurrentRouteName(navState.routes[navState.index]) 
} else { 
    if (navState.routeName==='One') { 
     this.setState({searchText:'Search One'}) 
    } 
    if (navState.routeName==='Two') { 
     this.setState({searchText:'Search Two'}) 
    } 
    if (navState.routeName==='Three') { 

     this.setState({searchText:'Search Three'}) 
    } 
    if (navState.routeName==='Four') { 
     this.setState({searchText:'Search Four'}) 
    } 
} 

} 
render() { 
return ( 
    <Root onNavigationStateChange={(prevState, newState) => { 
     this._getCurrentRouteName(newState) 
    }} /> 

    ) 


    } 
} 

export default App; 

router.js

...  

export const Root = StackNavigator({ 
Tabs: { 
screen: Tabs, 
navigationOptions: { 
header: <SearchHeader data={'Test'} /> 
    } 
    }, 
}, { 
    mode: 'modal', 
}); 

searchHeader.js

import React, { Component } from 'react'; 
import { View,Text,Dimensions,Alert } from 'react-native'; 
import { SearchBar } from 'react-native-elements'; 

class SearchHeader extends Component { 

    constructor(props) { 
super(props); 
    this.state = { 
    placeholder: "Search One" 
    } 

} 


render() { 
    return (
<SearchBar 
    noIcon 
    containerStyle={{backgroundColor:'#fff'}} 
    inputStyle={{backgroundColor:'#e3e3e3',}} 
    lightTheme = {true} 
    round = {true} 
    placeholder={data} 
    placeholderTextColor = '#000' 
/> 
); 
} 

}; 

export default SearchHeader; 

Answer 1

。

代替、あなたのアプリケーションの範囲に応じて、そのよう再来やMobXなどの状態ライブラリを見てだろう - それは、小さなアプリケーションの場合は、Reduxを使用することができるため、それはやり過ぎ

Answer 2

だ、あなたはこの構造は働くかもしれ

Answer 3

...そして、あなたのコンポーネントがそのストアに接続し、選択された減速機（S）と派遣アクションとその小道具をバインドすることができ、

を共有プロパティと値を置くことができる店舗を持っています。

class Home extends Component { 
    func(val) { 
     this.setState({value: val}); 
    } 
    render() { 
     return (
      <View> 
       <Two func={(val) => this.func(val)} /> 
      </View> 
     ) 
    } 
} 

class Two extends Component { 
    render() { 
     return (
      <View> 
       <Button title="set" onPress={() => this.props.func('data')} /> 
      </View> 
     ) 
    } 
}