使用 props.navigation 导入搜索栏组件

Question

我正在尝试将搜索栏组件导入到我的容器中，但 onSearch 函数不起作用。它 returns 一个错误 'undefined is not an object (evaluating 'this.props.navigation.navigate')。我错过了什么？

在我的容器中，我有：

import SearchBar from '../Components/SearchBar'

在渲染函数中我有

<SearchBar />

在SearchBar.js中：

  onSearch(terms) {
      console.log(terms);
      this.props.navigation.navigate('ProductsGrid', {searchTerms: terms})
  }

  render () {
    return (
      <View style={styles.container}>
        <TextInput
          ref='searchText'
          value={this.props.searchTerm}
          onSubmitEditing={(event) => this.onSearch(event.nativeEvent.text)}
          returnKeyType={'search'}
          autoCorrect={false}
        />
      </View>
    )
  }

Answer 1

需要在其中添加 {...this.props} 以传递道具。

<SearchBar {...this.props} />

使用 props.navigation 导入搜索栏组件

Import searchbar component with props.navigation

react-native

react-navigation