react-native选项卡导航器搜索框

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:

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

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

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?

我正在尝试更改搜索栏中的placeHolder文本，具体取决于所关注的选项卡。任何想法我怎么可能实现这一点？

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


);

1 个解决方案

#1

Please try like this:

请尝试这样：

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

And this:

和这个：

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

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

我正在对您的组件收到的道具进行解构，并将您的占位符设置为已发送给它的数据道具。

Let me know if it works.

如果有效，请告诉我。

Hope it helps.

希望能帮助到你。

#1