反应本机选项卡导航器搜索框 [英] react-native tab navigator search box

问题描述

我正在使用选项卡导航器，我有一个路由器设置了所有选项卡，我正在使用 react-native-elements 在根选项卡的标题中添加一个搜索框:

I'm using tab navigator and I have a router setting up all off the tabs and I'm using react-native-elements to add a search box into the header of the root tabs:

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

我正在尝试根据焦点所在的选项卡更改搜索栏中的 placeHolder 文本.有什么想法可以实现吗?

I'm trying to change the placeHolder text in the search bar depending on which tab is focused. Any ideas how I might achieve that?

我试图从路由器传递一个状态，但它不起作用.

I was trying to pass down a state from the router but it wasn't working.

return (


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


);

推荐答案

请尝试这样:

// 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',
});

我正在解构您的组件接收到的 props 并将您的占位符设置为已发送给它的 data prop.

I'm destructuring the props your component receives and set your placeholder as the data prop that has been sent to it.

让我知道它是否有效.

希望有帮助.

这篇关于反应本机选项卡导航器搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！