反応ネイティブタブナビゲータ検索ボックス

Question

私はタブナビゲータを使用していますが、ルータの設定はすべてタブから外してあり、反応ネイティブ要素を使用してルートボックスのヘッダーに検索ボックスを追加しています：

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

どのタブにフォーカスがあるかによって、検索バーのplaceHolderテキストを変更しようとしています。どのように私はそれを達成するかもしれない任意のアイデア？

ルータから状態を引き継ぎようとしていましたが、動作していませんでした。

return (


<SearchBar 
noIcon 
containerStyle={{backgroundColor:'#fff'}} 
inputStyle={{backgroundColor:'#e3e3e3',}} 
lightTheme = {true} 
round = {true} 
placeholder={this.props.data} 
placeholderTextColor = '#000' 
    /> 


); 

Answer 1

このようにしてみてください：

// SearchHeader.js 
const SearchHeader = ({ data }) => { 

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

}); 

export default SearchHeader; 

そして、この：

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

私はあなたのコンポーネントが受け取る小道具を構造化代入して送信されているdata小道具としてプレースホルダを設定していますがそれに。

動作するかどうか教えてください。

希望します。