React（本机）导航切换搜索栏

Question

几天来一直在苦苦挣扎，试图弄清楚如何在反应导航中切换搜索栏。

我的方法是

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 添加一些逻辑，以便它返回 cog 图标按钮组件或 TextInput 组件（计划将文本传递给 setParams 并将其用作列表组件下方的过滤器header) 但我似乎无法弄清楚当我不导航到它时如何将状态或状态处理程序作为道具传递.. 这是初始屏幕。

Answer 1

在 componentDidMount 中将一个函数与 setParams 挂钩，这将 在 searchedText 更改时调用，使用此函数设置状态。

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>
    )
  }}

希望对你有所帮助...