Question

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

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


);

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选项卡导航器搜索框

1 个答案: