如何在 React-native 中创建下拉菜单？

Posted 2023-05-07

技术标签:

【中文标题】如何在 React-native 中创建下拉菜单？【英文标题】：How to create drop-down in React-native? 【发布时间】：2021-05-08 17:00:24 【问题描述】：

我想在我的视图中添加一个下拉列表。我是 rative 新手，请帮忙。

我还在尝试添加下拉列表的位置添加了评论。我试过这个https://www.npmjs.com/package/react-native-dropdown-picker，但它只是给了我一些错误。

import React, useState from 'react'; //导入使用状态从“react-native-dropdown-picker”导入 DropDownPicker； import StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert from 'react-native';

    export default function App() 
    
        const [search, setSearch] = useState(''); //add this line
        
      return (      
        
        <SafeAreaView>
          <View style=styles.container>
            <TextInput 
              onChangeText=(text) => setSearch(text)
              
              placeholder="Search"
              style=styles.searchbox                        
            ></TextInput>   
    
          <View style=styles.makecentral >   
            search.length < 1 ? <Image               
                style=styles.tinyLogo
                source=require('./assets/icons8_search_200px_3.png')        
              /> : ( 
                  null  //add clear text image and clear search text
                  
              )
          
          </View>
                <View style=flexDirection:'row'>
    
                  <View elevation=2  style=flex:3,backgroundColor:'#ffffff',height:40,marginTop:10,marginLeft:'2.5%',borderBottomLeftRadius:5,borderTopLeftRadius:5>
                    <Text style=textAlign:'center',fontSize:20,color:'#FF7B00',marginTop:7>
                      Category
                    </Text>
                  </View>
                  
                  <View elevation=2 style=backgroundColor:'#FF7B00',height:40,flex:5,marginTop:10,borderTopRightRadius:5,borderBottomRightRadius:5,marginRight:'2.5%'>

                   //here..I want to add a dropdown..
       
                  </View>
    
                
                </View>
    
        </View>
        </SafeAreaView>
      );
    
    
    
    const styles = StyleSheet.create(
      container:     
        backgroundColor: '#fff',    
        
      ,
    
      searchbox:
        backgroundColor:'#f2f2f2',
        marginTop : StatusBar.currentHeight+5,
        height : 50,
        marginLeft:10,
        marginRight : 10,
        borderRadius : 20,
        textAlignVertical:'center',
        textAlign : 'center',
        alignItems:'center',        
      ,
    
      tinyLogo: 
        position : 'absolute',
        width: 30,
        height: 30,
        opacity: 0.5,
        marginTop: -40,    
      ,
    
      makecentral: 
        alignItems:'center',
        marginRight:80,    
      ,
    
      category:
        backgroundColor:'#f2f2f2',
        height:50,
        width:'90%',
        alignContent:'center',
    
    
      
    );

【问题讨论】：

它给你的错误是什么？ 1drv.ms/u/s!AsrHS57YPlM33SyN89lxvxI0nXMX?e=gVPSOn 当我尝试在视图中添加时。 【参考方案1】：

从您的回答看来，您没有向您的DropDownPicker 提供items，因此它崩溃了。你不能只给出一个空组件。

根据文档，它应该类似于：

<DropDownPicker
    items=[
        label: 'USA', value: 'usa', icon: () => <Icon name="flag" size=18 color="#900" />, hidden: true,
        label: 'UK', value: 'uk', icon: () => <Icon name="flag" size=18 color="#900" />,
        label: 'France', value: 'france', icon: () => <Icon name="flag" size=18 color="#900" />,
    ]
    defaultValue=this.state.country
    containerStyle=height: 40
    style=backgroundColor: '#fafafa'
    onChangeItem=item => this.setState(
        country: item.value
    )
/>

items 实际上是唯一需要的道具。

请参考here

【讨论】：

把 this.state = country: 'uk' nono，这只是一个示例 - 使其适应您的数据。添加要在下拉选择器中显示的数据。【参考方案2】：

这是一个很棒的用于添加下拉菜单的 npm 包：react-native-dropdown

您还可以使用其他组件库，例如Ui Kitten。其中包含一个更好的下拉菜单。

这是一个特定的下拉链接：- Link

您可以使用许多其他库。考虑一下：- top libraries

【讨论】：

【参考方案3】：

这是您可以用于在 react native 中创建下拉选择器的库：-

react-native-dropdown-picker