Ant-Design React-Native搜索栏取消按钮按下时无法隐藏自身

Question

我正在尝试按下搜索栏右侧的“取消”按钮。我尝试使用showCancelButton道具，但是它不起作用。Ant-Design React-Native Docs Link

本机版本0.61.4

ios模拟器版本12.4

import React, {useState} from 'react';
import { Alert, View} from 'react-native';
import { SearchBar } from '@ant-design/react-native';


const SearchBarDemo = () => {
  const [value, setValue] = useState('');    
  const [showCancel, setShowCancel] = useState('true');

  const onChange = (currentValue) => {
    setValue(currentValue);
  }

  const clear = () => {
    setValue('');        
    setShowCancel('false');
  }

  return (
    <View style={{ marginTop: 30}}>           
      <SearchBar			
        value={value}
        placeholder="Search products, brands"
        onSubmit={value => Alert.alert(value)}              
        onCancel={clear}
        onChange={onChange}                  
        cancelText='Cancel'
        showCancelButton={showCancel}        
      />
    </View>
  );


};
export default SearchBarDemo;

Answer 1

您使用的是真和假字符串。字符串'false'的计算结果为true。

用'true'和'false'替换true和false，它应该可以工作