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

时间:2019-04-05 09:45:30

标签: react-native react-native-vector-icons

我想用条形码扫描图标来更改本机纸张searchbar中的搜索图标。
本机论文使用react-native-vector-icons进行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}/>}
/>

这是正确的方法还是我缺少什么?

enter image description here

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

只需在图标中添加'()=>'就足够了

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