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

Question

我想在我的视图中添加一个下拉菜单。 我是母语新手，请帮忙。

我还添加了一条评论，我试图添加一个下拉菜单。我尝试了这个https://www.npmjs.com/package/react-native-dropdown-picker但它只是给了我一些错误。

从 'react' 导入 React, { useState }; //导入useState 从“react-native-dropdown-picker”导入 DropDownPicker； 从 'react-native' 导入 { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert};

    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',
    
    
      }
    });

Answer 1

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

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

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

还有许多其他库可以使用。考虑一下：- 顶级图书馆

Answer 2

从您的回答看来，您没有向您的

items

提供

DropDownPicker

，因此它崩溃了。你不能只提供一个空组件。

根据文档，它应该看起来像：

<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

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

请参考这里

Answer 3

这是您可以用于在本机反应中创建下拉选择器的库：-

反应本机下拉选择器

Answer 4

https://www.npmjs.com/package/react-native-dropdown-picker

自从原生 iOS 选择器更改为新版本以来，效果非常好，但新版本不太有吸引力或用户友好。

使用两个平台时，请务必阅读有关 zindex 和重叠的文档，因为这可能会导致一些问题。