如何在React-native中创建下拉列表?

Question

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

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

import React， {useState} from ' React ';//导入useState从'react-native- DropDownPicker '导入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',


}
});

Answer 1

这是一个用于添加下拉列表的优秀npm包:react-native-dropdown

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

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

您可以使用许多其他库。考虑这个:- top libraries

Answer 2

从你的回答看来，你没有向你的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实际上是唯一需要的道具。

请参考此处

Answer 3

你可以用这个库在react native中创建一个下拉选择器:-

react-native-dropdown-picker

Answer 4

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

工作得很好，因为原生iOS选择器更改为新版本，这不是很吸引人或用户友好。

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