React（本机）导航切换搜索栏-Java 学习之路

几天来一直在努力弄清楚如何在反应导航中切换搜索栏 .

我的方法一直是

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

enter image description here

然后我想为 headerLeft 添加一些逻辑，所以它返回cog图标按钮组件或TextInput组件（计划将文本传递给 setParams 并将其用作 Headers 下方列表组件中的过滤器）但我可以't seem to figure out how to pass down a state or state handler as props when I' m没有导航到它..这是初始屏幕 .

1 回答

将一个函数挂钩到componentDaraMount中的setParams，它将在searchText更改时调用，使用此函数来设置setState .

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

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

回复于 2024-05-17T14:12:19+08:00

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

1 回答

相关问题