定义自动完成列表的高度 - React Native答案

【问题标题】：Define height of AutoComplete list - React Native定义自动完成列表的高度 - React Native
【发布时间】：2021-09-09 15:21:04
【问题描述】：

我设置列表高度的 listStyle 不适用于自动完成。我正在使用 react-native-autocomplete-input。检查示例：

<HideKeyboard>
  <SafeAreaView style={mainStyle.container}>
    <StatusBar style="light" backgroundColor="#0a3f88" />   
    
    <SimpleLineIcons style={mainStyle.menuIconHome} name="menu" size={28} color="black" onPress={() => {Keyboard.dismiss(), navigation.openDrawer()}}/>                       
    
    <Image style={mainStyle.logo} source={logo}></Image>
            
    <Autocomplete      
        style={{
          backgroundColor:"transparent", 
          textAlign:"center",                        
          }}  
        onChangeText={(text) => searchFilterFunction(text)}
        data={filteredDataSource}          
        placeholder="Nome da empresa..."
        autoFocus={true}         
        listStyle={{
          maxHeight:20,
        }}             
        containerStyle={{
          paddingHorizontal:40,
          position:"absolute",
          top:"45%",
          alignSelf:"center",                                      
        }}
        inputContainerStyle={{            
          height:40,
          zIndex:999,                    
        }}                     
        flatListProps={{
          keyExtractor: (item, index) => index.toString(),
          renderItem: ({ item }) =>
    
            <TouchableOpacity
               onPress={()=>{
                 navigation.navigate("Projeto",{
                   item:item,
                 });
               }}                
             >                
          
          
               <View style={{                                          
                 height:50,            
                 borderBottomWidth:0.4,                                          
               }}>
                 <Text style={{
                   color:"#0a3f88",
                   fontWeight:"bold",
                   marginLeft:10,                       
                 }}>{item}</Text>
               </View>
        
            </TouchableOpacity>
   
         
           
        }}                                     
      />                
      
   
 
    <Image style={mainStyle.cmlagos} source={camaraLagos}></Image>             
  </SafeAreaView>
</HideKeyboard>

正如您在下面的主屏幕中看到的，listStyle 无效。

已经尝试在自动完成之外使用 ScrollView，但它是一样的。有什么建议吗？

【问题讨论】：

标签： react-native autocomplete expo

【解决方案1】：

解决了！除了使用 listStyle，我们可以在 flatListProps 中使用 style:{height: 150}。

【讨论】：