反应原生：如何将“onPress”放在图标内？答案

【问题标题】：react native : How do I put "onPress" inside the icon?反应原生：如何将“onPress”放在图标内？
【发布时间】：2020-11-23 09:22:21
【问题描述】：

这部分怎么放

onPress={() => {setFilterModalVisible(!FilterModalVisible);}}

在图标内？

这是我的示例代码：

<Searchbar
                  icon={() => <Icon name="arrow-right" size={30} />}
                  placeholder="חיפוש..."
                  value={searchFilter}
                  onChangeText={(searchFilter) => setSearchFilter(searchFilter)}
                  returnKeyType="search"
                  onSubmitEditing={() => {
                    if (searchFilter != '') {
                      filterDrishot();
                    }
                  }}
                />

【问题讨论】：

你在SearchBar组件中显示一个图标？
我编辑我的问题..
检查更新的答案。

标签： javascript reactjs react-native searchbar

【解决方案1】：

这样做，

<Searchbar
    icon={() => <Icon name="arrow-right" size={30} />}
    onIconPress={() => {setFilterModalVisible(!FilterModalVisible);}}
    ...
/>

【讨论】：

【解决方案2】：

Expo Snack for above screenshot example

在onIconPress上调用onPress函数

onIconPress docs

您可能的解决方案。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';
import { View, Text } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
const MyComponent = (props) => {
  const [firstQuery, setFirstQuery] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [FilterModalVisible, setFilterModalVisible] = React.useState(false);

  return (
    <View>
      <Searchbar
        style={{ marginTop: 60 }}
        placeholder="Search"
        onChangeText={(query) => {
          setFirstQuery(query);
        }}
        value={firstQuery}
        icon="arrow-right"
        onIconPress={() => {
          setFilterModalVisible(!FilterModalVisible);
        }}
      />
      <Text> FilterModalVisible  {FilterModalVisible? " : True":" : False"}</Text>
    </View>
  );
};

export default MyComponent;

PS：在安卓或ios模拟器上运行应用，网页视图不呈现图标。

【讨论】：