javascript - React( native )导航切换搜索栏

Question

几天来一直在努力尝试找出如何在 react 导航中切换搜索栏。

我的方法是

static navigationOptions = ({navigation}) => {
  return {
    title: 'Header Title',
    headerLeft: (
      {navigation.params.state.search ? <searchfield query={text => navigation.setParams(text)} > : <settings>}
    ),
    headerRight: (
      <TouchableOpacity style={{ marginHorizontal: 10 }}>
        <Icon name="search" size={28} color="#5751D9" />
      </TouchableOpacity>
    )
  }}

然后我想向 headerLeft 添加一些逻辑，以便它返回齿轮图标按钮组件或 TextInput 组件(计划将文本传递给 setParams 并使用它作为标题下方列表组件中的过滤器)，但当我不导航到它时，我似乎无法弄清楚如何将状态或状态处理程序作为 Prop 传递。这是初始屏幕。

Answer 1

将一个函数挂接到 componentDidMount 内的 setParams 上，这将 在 searchedText 更改时调用，使用此函数来 setState。

componentDidMount() {
  this.props.navigation.setParams({onSearchText: (searchedText) => this.onSearchText(searchedText)});
}
onSearchText(searchedText) {
  //update your list using this searchedText
  this.setState({searchedText})
}

现在当 searchedText 发生变化时调用函数 onSearchText()，

static navigationOptions = ({navigation}) => {
  return {
    title: 'Header Title',
    headerLeft: (
      {navigation.params.state.search ? <searchfield query={text => onSearchText(text)} > : <settings>}
    ),
    headerRight: (
      <TouchableOpacity style={{ marginHorizontal: 10 }}>
        <Icon name="search" size={28} color="#5751D9" />
      </TouchableOpacity>
    )
  }}

希望对你有帮助...