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

Question

我想把 react-native-paper searchbar 中的搜索图标改成条形码扫描图标。
native-paper 使用 react-native-vector-icons for icons and barcode-scan available in MaterialCommunityIcons
这是我试过的代码，它给出了一个空白而不是一个图标

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

这是正确的方法还是我遗漏了什么？

Answer 1

你必须使用回调来传递图标属性中的组件

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

Answer 2

只需在图标中添加'()=>'即可

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

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

Replace search icon in react-native-paper searchbar with icons from MaterialCommunityIcons

react-native

react-native-vector-icons