如何在搜索栏下方显示建议时动态更改 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