ReactNative实现搜索框功能

　　手把手教你如何在ReactNative中实现搜索功能，搜索图标使用的是reactnativevectoricons中的MaterialIcons，前提是已经安装了reactnativevectoricons，安装reactnativevectoricons参见：在ReactNative项目中使用reactnativevectoricons图标
　　代码：importReact，｛useState｝fromreact；import｛View，Text，ScrollView，TextInput，ActivityIndicator，｝fromreactnative；importIoniconsfromreactnativevectoriconsIonicons；import｛DrawerParamList，TabParamList｝from。。。。。。typestypes；import｛CompositeNavigationProp｝fromreactnavigationnative；import｛BottomTabNavigationProp｝fromreactnavigationbottomtabs；import｛DrawerNavigationProp｝fromreactnavigationdrawer；importMaterialIconsfromreactnativevectoriconsMaterialIcons；exporttypeHomeScreenPropsRouterStackScreenPropsHomeScreen；exporttypeHomeScreenPropsCompositeNavigationPropBottomTabNavigationPropTabParamList，HomeScreen，DrawerNavigationPropDrawerParamList；constHomeScreen（｛route，navigation｝：HomeScreenProps）｛const〔query，setQuery〕useStatestring（）；搜索内容const〔loading，setLoading〕useStateboolean（true）；是否在搜索中const〔opacity，setOpacity〕useStatenumber（0）；清空搜索内容时清空图标的透明度constfetchData（）｛setLoading（false）；setOpacity（1）；TODO调用后端搜索接口，搜索结束要将state恢复初始状态setLoading（true）；setOpacity（0）；｝；return（Viewstyle｛｛flex：1｝｝｛TODO｝ScrollViewViewstyle｛｛flexDirection：row，borderColor：c6c6c6，borderRadius：8，borderWidth：1，paddingVertical：10，paddingHorizontal：8，｝｝MaterialIconsnamesearchsize｛20｝colorc6c6c6style｛｛marginRight：5｝｝TextInputplaceholder搜索autoFocus｛true｝clearButtonModewhileeditingreturnKeyTypesearchonChangeText｛query｛setQuery（query）；｝｝onSubmitEditing｛（）｛fetchData（）；｝｝｛搜索时显示加载指示器｝ViewScrollViewView）；｝；exportdefaultHomeScreen；
　　使用ReactNative提供的TextInput组件来实现搜索输入框功能，该组件的属性说明：autoFocus：自动选中输入内容clearButtonMode：显示清除输入内容图标，只有在iOS显示这个属性returnKeyType：回车键输入时键盘最后一个键显示的文本内容，这里设置文本为search，只有在iOS显示这个属性onSubmitEditing：搜索触发的回调函数，这里绑定fetchData方法，需要在这里个方法调用后端搜索接口获取搜索结果