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标签导航器搜索框

回答

相关问题