如何在搜索欄下方顯示建議時動態更改 Google-Places-Autocomplete TextInput 邊框半徑

Question

我在我的項目中實現了 Google Places Autocomplete API，並使用 borderRadius 設置了搜索欄 (TextInput) 的樣式。 我想要做的是更改 borderRadius，而不是在未使用 TextInput 時，而不是在它被聚焦時，僅在輸入文本后出現建議列表時才更改。

這是它現在的樣子：

帶有列表建議的 TextInput borderRadius

這是代碼：

   import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

   export default function App() {

   return(

     <GooglePlacesAutocomplete  
        fetchDetails={true} // you need this to fetch the details object onPress
        minLength={2}
        placeholder="Search for a place"
        query={{
           key: "YOUR_API_KEY",
           language: "en", // language of the results
           type:"(regions)" 
        }}

       onPress={(data, details= null) => {
           console.log(details);
        }}

      onFail={(error) => console.error(error)} 

      styles={{
        textInputContainer:{  
   
           width: '90%,                  
        },
        textInput: {

           borderTopLeftRadius:0,
           borderBottomLeftRadius:0,
           paddingVertical: 16,
           paddingHorizontal: 16,
           borderRadius: 20,                      // borderRadius here 
           color: 'black',
           fontSize: 16,
           height:50,
           left:
       },}}


      /> 
    );
    }

當建議列表出現在搜索欄下方時，如何動態更改 borderRadius 以便 borderBottomLeft 和 borderBottomRight 變為 0？

Answer 1

取一個狀態變量：

const [isSuggestions,setIsSuggestions]=useState(false)

現在每當你得到建議時就這樣做

setIsSuggestions(true)

然后風格：

borderRadius: isSuggestions ? 0 : 20