Question

我想从导航栏中的搜索图标触发 onPress 功能。这是搜索组件：

function SearchIcon(props) {
  const theme = useSelector(state => state.themer.theme);
  return (
    <Icon.Button
      name="search"
      size={22}
      color={theme.icons}
      backgroundColor={theme.top_tab}
      onPress={() => {}}
    />
  );
}

export default SearchIcon;

正在特定堆栈中调用搜索组件，在那里需要它。

<Stack.Screen
        name="Home"
        component={Home}
        options={({navigation, route}) => ({
          ...,
          headerRight: props => (
            <View style={{flexDirection: 'row'}}>
              <SearchIcon  />
              <CartIcon navigation={navigation} />
            </View>
          ),
        })}
      />

在主屏幕上，我有一个 isSeacrhing 常量，它应该将值从 false 更改为 true，反之亦然。

const [data, setData] = React.useState({
    isSearching: false,
    search: '',
...
  });

  // TRIGGERED BY SEARCH ICON IN NAV BAR
  const toggleSearch = () => setData({...data, isSearching: !isSearching});

{data.isSearching == false ? (
          <ScrollView
            ...
          </ScrollView>
        ) : (
          <View>
            <TextInput
              style={[styles.textInput, [{color: theme.text, ...FONTS.body4}]]}
              value={data.search}
              placeholder="Search..."
              placeholderTextColor={theme.text}
              onChangeText={()=>{}}
            />
          </View>
        )}

是否可以触发 onPress 函数，或者有其他方法可以使其工作？搜索图标在两个屏幕上，调用相同的函数是否会使 TextInput 出现在两个屏幕上？

Answer 1

无论你在哪里使用 <SearchIcon /> 只需像这样添加一个道具

<SearchIcon onPress={() => { // Do Something }} />

然后在您的 SearchIcon

function SearchIcon(props) {
  const theme = useSelector(state => state.themer.theme);
  return (
    <Icon.Button
      name="search"
      size={22}
      color={theme.icons}
      backgroundColor={theme.top_tab}
      onPress={props.onPress} // Access it here like this
    />
  );
}

export default SearchIcon;

从另一个组件触发 onPress 函数

1 个答案: