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

Question

我试图让搜索栏右侧的取消按钮在按下时隐藏。我尝试使用 showCancelButton 道具，但它不起作用。Ant-Design React-Native 文档链接

这是问题重现 repo 的链接https://github.com/kvnlee777/antd-rn-issue

反应原生版本 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。

用and替换'true'and它应该可以工作'false'truefalse