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并将其用作过滤器标题下面的列表组件）但是当我没有导航到它时，我似乎无法弄清楚如何将状态或状态处理程序传递给道具。这是初始屏幕。

Answer 1

将一个函数挂钩到componentDidMount中的setParams 在searchText更改时调用，使用此函数来设置状态。

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

现在，当searchText发生变化时，调用函数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>
    )
  }}

希望它能帮到你......