用MaterialCommunityIcons中的图标替换react-native-paper搜索栏中的搜索图标

Question

I want to change the search icon in the searchbar of react-native-paper with the barcode-scan icon.
The native-paper uses react-native-vector-icons for icons and barcode-scan available in MaterialCommunityIcons
Here is the code that I tried which gives a blank instead of an icon

import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
  placeholder="Search"
  onChangeText={query => { this.setState({ firstQuery: query }); }}
  value={firstQuery}
  icon={<MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>

Is this the right way or am I missing something?

Answer 1

您必须使用回调来传递图标prop中的组件

icon={() => <MaterialCommunityIcons name="barcode-scan" size={30}/>}

Answer 2

Just adding '()=>' in icon wiil be suffice

 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'; <Searchbar placeholder="Search" onChangeText={query => { this.setState({ firstQuery: query }); }} value={firstQuery} icon={()=><MaterialCommunityIcon name="barcode-scan" size={30}/>} />