如何在react-native中创建自定义下拉菜单?

2ekbmq32  于 2022-12-19  发布在  React
关注(0)|答案(3)|浏览(242)

我正在开发的应用程序,需要创建自定义下拉菜单的任何参考帮助。

ctehm74n

ctehm74n1#

尝试下面这个我使用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"
  }
});

根据您的要求更改,如有疑问,请自便。

hrirmatl

hrirmatl2#

使用https://www.npmjs.com/package/react-native-modal-dropdown
与iOS和Android兼容。自动定位。(不会被屏幕边缘覆盖或剪切。)零配置。(当然需要选项或加载指示器将显示。)高度可定制。通过代码与API可控。(显示/隐藏/选择)将一切更改为下拉列表触发器。

lhcgjxsq

lhcgjxsq3#

如果你正在寻找一个可搜索的下拉菜单,我建议
react-native-element-dropdown这真的很有用。你可以很容易地在你的列表中搜索
https://www.npmjs.com/package/react-native-element-dropdown

相关问题