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

Question

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

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

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

我试图从路由器传递一个状态，但它不工作。

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 道具。

如果有效请告诉我。

希望对您有所帮助。

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

react-native tab navigator search box

react-native

react-navigation