react-native標籤導航器搜索框

我正在使用標籤導航器，並且我有一個路由器設置了所有標籤，我正在使用react-native-elements將搜索框添加到根標籤的標題中：react-native標籤導航器搜索框

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


);

來源

2017-09-10 Pete Nice

'SearchHeader'返回您在下面發佈的代碼？如果是這樣，你有沒有嘗試過這樣的事情：''？ – soutot

{this.props.data}是我使用從路由器傳遞道具的嘗試。 –

也許我應該在這裏添加： export const Root = StackNavigator（{Tabs：{screen：Tabs，navigationOptions：{header：}}，}，{mode ：'modal'，}）; –

請嘗試這樣的：

// 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道具到它。

讓我知道它是否有效。

希望它有幫助。

來源

2017-09-10 19:03:10 soutot

react-native標籤導航器搜索框

回答

相關問題