我正在开发的应用程序,需要创建自定义下拉菜单的任何参考帮助。
ctehm74n1#
尝试下面这个我使用react Native Picker创建的示例
react Native Picker
import React, { Component } from "react"; import { Picker, View, Text, StyleSheet } from "react-native"; export default class CategoryScreen extends Component { state = { selectedcat: "", category: [ { itemName: "Samsung M20" }, { itemName: "Nokia" }, { itemName: "Apple" }, { itemName: "Samsung M23" }, { itemName: "Samsung M24" }, { itemName: "Samsung M25" } ] }; async onValueChangeCat(value) { this.setState({ selectedcat: value }); } render() { return ( <View style={styles.viewStyle}> <View style={{ flex: 0.3 }}> <Text style={styles.textStyle}>Categories</Text> </View> <View style={{ flex: 0.7, fontSize: 14 }}> <Picker itemStyle={styles.itemStyle} mode="dropdown" style={styles.pickerStyle} selectedValue={this.state.selectedcat} onValueChange={this.onValueChangeCat.bind(this)} > {this.state.category.map((item, index) => ( <Picker.Item color="#0087F0" label={item.itemName} value={item.itemName} index={index} /> ))} </Picker> </View> </View> ); } } const styles = StyleSheet.create({ viewStyle: { flex: 1, alignSelf: "center", flexDirection: "row", width: "92%", justifyContent: "space-between", alignItems: "center" }, itemStyle: { fontSize: 10, fontFamily: "Roboto-Regular", color: "#007aff" }, pickerStyle: { width: "100%", height: 40, color: "#007aff", fontSize: 14, fontFamily: "Roboto-Regular" }, textStyle: { fontSize: 14, fontFamily: "Roboto-Regular" } });
根据您的要求更改,如有疑问,请自便。
hrirmatl2#
使用https://www.npmjs.com/package/react-native-modal-dropdown与iOS和Android兼容。自动定位。(不会被屏幕边缘覆盖或剪切。)零配置。(当然需要选项或加载指示器将显示。)高度可定制。通过代码与API可控。(显示/隐藏/选择)将一切更改为下拉列表触发器。
lhcgjxsq3#
如果你正在寻找一个可搜索的下拉菜单,我建议react-native-element-dropdown这真的很有用。你可以很容易地在你的列表中搜索https://www.npmjs.com/package/react-native-element-dropdown
3条答案
按热度按时间ctehm74n1#
尝试下面这个我使用
react Native Picker
创建的示例根据您的要求更改,如有疑问,请自便。
hrirmatl2#
使用https://www.npmjs.com/package/react-native-modal-dropdown
与iOS和Android兼容。自动定位。(不会被屏幕边缘覆盖或剪切。)零配置。(当然需要选项或加载指示器将显示。)高度可定制。通过代码与API可控。(显示/隐藏/选择)将一切更改为下拉列表触发器。
lhcgjxsq3#
如果你正在寻找一个可搜索的下拉菜单,我建议
react-native-element-dropdown这真的很有用。你可以很容易地在你的列表中搜索
https://www.npmjs.com/package/react-native-element-dropdown