在本机反应中创建下拉菜单答案

【问题标题】：Create dropdown menu in react native在本机反应中创建下拉菜单
【发布时间】：2018-08-16 02:17:27
【问题描述】：

我想在 react native 和 typescript 中创建如下所示的下拉菜单。请建议一种在 ios 和 android 上执行此操作的方法。 dropdown menu

【问题讨论】：

选择器（react-native），或 react-native-material-dropdown

【解决方案1】：

react-native 库 (Link) 提供了一个 Picker 组件。您还可以使用原生库 (Link) 之类的库。然后，您将 onPress 操作操作附加到它，或者您使用 react-native-popupmenu 库，但我在使用类型脚本时遇到问题。

【讨论】：

谢谢我的朋友，真的很有帮助

【解决方案2】：

查看完整示例以创建下拉菜单 ...

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Alert, YellowBox} from "react-native";
import { Menu, MenuProvider, MenuOptions, MenuOption, MenuTrigger} from "react-native-popup-menu";

export default class HomeActivity extends Component {

  constructor(props) {
     super(props);
     YellowBox.ignoreWarnings([
      'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader'
    ]);
   }

  render() {
    return (
      <MenuProvider style={{ flexDirection: "column", padding: 30 }}>
        <Menu onSelect={value => alert(`You Clicked : ${value}`)}>

          <MenuTrigger  >
          <Text style={styles.headerText}>DropDown Menu</Text>
          </MenuTrigger  >

          <MenuOptions>
            <MenuOption value={"Login"}>
              <Text style={styles.menuContent}>Login</Text>
            </MenuOption>
            <MenuOption value={"Register"}>
              <Text style={styles.menuContent}>Register</Text>
            </MenuOption>
            <MenuOption value={"Download"}>
              <Text style={styles.menuContent}>Download</Text>
            </MenuOption>
            <MenuOption value={"Logout"}>
              <Text style={styles.menuContent}>Logout</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true}>
              <Text style={styles.menuContent}>Disabled Menu</Text>
            </MenuOption>
          </MenuOptions>

        </Menu>
      </MenuProvider>
    );
  }
}

const styles = StyleSheet.create({
    headerText: {
    fontSize: 20,
    margin: 10,
    fontWeight: "bold"
  },
  menuContent: {
    color: "#000",
    fontWeight: "bold",
    padding: 2,
    fontSize: 20
  }
});

【讨论】：

您好只是想知道，是否有动态填充 MenuOptions 的方法？
是的，可以使用反应状态对象。