picker.item上的onPress以关闭dropdown- react-native
在React Native中，Picker是一个常用的组件，用于创建下拉选择框。当用户点击Picker中的选项时，我们可以通过在picker.item上添加onPress事件来实现关闭下拉框的功能。
具体实现步骤如下：
- 首先，确保已经安装了React Native的相关依赖和环境。
- 在需要使用Picker的组件中，引入Picker组件：
- 在需要使用Picker的组件中，引入Picker组件：
- 创建一个状态变量来控制Picker的显示与隐藏：
- 创建一个状态变量来控制Picker的显示与隐藏：
- 在render方法中，使用Picker组件来创建下拉选择框，并设置相关属性：
- 在render方法中，使用Picker组件来创建下拉选择框，并设置相关属性：
- 在上述代码中，通过selectedValue和onValueChange属性来控制Picker的选中值和选中值改变时的回调函数。mode属性设置为"dropdown"以创建下拉选择框的样式。style属性可以用来自定义Picker的样式。enabled属性用于控制Picker是否可用。
- 在需要关闭Picker的地方，通过修改showPicker状态变量来控制Picker的显示与隐藏：
- 在需要关闭Picker的地方，通过修改showPicker状态变量来控制Picker的显示与隐藏：
- 在上述代码中，通过TouchableOpacity组件和onPress事件来触发关闭Picker的操作。通过修改showPicker状态变量的值，可以实现Picker的显示与隐藏切换。
通过以上步骤，我们可以实现在React Native中使用Picker组件，并通过picker.item上的onPress事件来关闭下拉选择框。
腾讯云相关产品推荐：
- 云开发：提供一站式后端云服务，包括云函数、数据库、存储等，可快速搭建移动应用后端。
- 云服务器（CVM）：提供可扩展的云服务器实例，支持多种操作系统，适用于各类应用场景。
- 云数据库 MySQL 版：提供高性能、可扩展的云数据库服务，适用于各类Web应用和移动应用。
- 云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等多媒体资源的存储和管理。
更多腾讯云产品信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
React Native:让第二个选择器(selectedValue2)工作的方法是什么？
javascript、react-native
让第二个选择器(selectedValue2)工作的方法是什么？当我试图改变第二个选择器时，它不会改变它的值，我不明白为什么。我想知道原因是什么，以及我是如何处理它的。 import React, { useState } from 'react';
import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Picker } from '@react-native-community/picker';
const Settings
浏览 22提问于2020-08-10得票数 0
回答已采纳
1回答
React Native选取器不保留新选择的选项
react-native
我有两个选择器来选择将语言翻译为语言。其中一个用于输入，另一个用于输出以更改语言。但是我对第二个选择器(输出语言选择器)有一个问题。我从第一个选项向下拖动到其他语言选项，选取器立即返回到第一个标签选项。我希望选择器停留在新滚动到的选项上。First Picker没有问题。 import React, { Component, useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, TouchableOpacity, Image, ScrollView } from 're
浏览 15提问于2020-04-23得票数 0
1回答
反应本机onValueChange
reactjs、react-native、picker
我试图用onValueChange编写两个函数，但它只执行其中一个函数。有办法吗？
import { Picker } from 'react-native';
<Picker
selectedValue={selectedValue}
style={{ height: 35, width: 135 }}
onValueChange={(todoInput2) => props.textChange(todoInput2)}
onValueChange={(itemValue, itemIndex) =&g
浏览 3提问于2022-03-11得票数 0
1回答
Render Picker Items from React-Native picker以填充下拉菜单选择
reactjs、react-native-picker
我成功地使用react-native选取器在我的一个组件中呈现了一个下拉菜单。现在，在选择器代码中，我正在对用于填充下拉菜单项的值进行硬编码。理想情况下，我想要做的是将它们作为道具传入，并让它们在picker中动态生成所需的任意数量的项。不过，我不确定该怎么做。我尝试使用for循环，但我不能在组件代码本身中运行这种条件逻辑。这就是硬编码值的外观。
export const DropDownMenu = (props) => {
const [selectedValue, setSelectedValue] = useState(null);
return (
<Vi
浏览 5提问于2021-05-14得票数 0
回答已采纳
1回答
从API映射函数组件中的数组
arrays、react-native、fetch-api、picker
我想在选择器中调用并显示API，以响应本机。我不明白如何在functional中，在map部分中，这样它才能得到值
import React, {useState,useEffect} from 'react';
import {View, StyleSheet, Picker} from 'react-native';
const App = () => {
const [selectedValue, setSelectedValue] = useState([]);
useEffect(() => {
fet
浏览 1提问于2020-11-13得票数 0
回答已采纳
2回答
Expo SQLite渲染无限数量的组件
react-native、sqlite、expo
我目前正在使用expo和它的sqlite数据库编写一个react原生应用程序。我从数据库中获取一些数据，然后呈现一些组件，select查询的每一行都有一个组件。 我的问题是，它不是使用正确的数据呈现正确数量的组件，而是呈现无限数量的没有数据的组件。 代码(奇怪的渲染发生在elem.map中)： import React, {useCallback, useEffect, useState} from 'react';
import {Picker, Text, TextInput, TouchableOpacity, View} from "react-native&
浏览 12提问于2021-07-27得票数 0
1回答
React Native动态创建的组件不会在第一次单击时呈现
javascript、reactjs、react-native、ecmascript-6
我尝试通过动态地将列表项添加到state中的数组中，然后使用map运算符来迭代它们来创建列表。但是，新列表项仅在第二次单击处理setState方法的按钮后呈现。对解决这个问题有什么建议吗？
...
constructor(props) {
super(props);
this.state = {
requirements:[], // Placeholder array in state
currentRequirement
}
}
...
在我的render方法中，我有这个。
{
this.state.requirements.
浏览 0提问于2018-08-10得票数 0
1回答
为什么我的应用程序关闭时，我按下按钮？
react-native、react-redux、expo
我的反应本机应用程序关闭时，没有错误的按钮被按下。密码在下面。我哪里出错了？此错误在添加缩略图后开始。以前，选择器是用文本打开的。我想在里面添加图片。我正试着提出这样的申请。
错误视频：
import React, { useState } from 'react';
import { navigationService } from '../../services/NavigationService';
import {
Picker,
Platform,
ScrollView,
Sty
浏览 4提问于2021-08-03得票数 0
2回答
React本机FlatList仅在TextInput或选取器更改时更新
javascript、react-native、textinput
我正在尝试将输入字段和选择器中的文本动态添加到React Native中的FlatList中。我遇到的问题是，我一按下按钮，FlatList就不会立即更新。 只有在触发文本输入的onChangeText或选择器元素的onValueChange之后，项目才会最终添加到列表中。 import React, { Component } from 'react';
import { View, Text, Picker } from 'react-native';
import { TextInput } from 'react-native-paper
浏览 35提问于2020-07-16得票数 1
回答已采纳
1回答
为什么React Native Picker在我的Android模拟器中不起作用？
android、reactjs、react-native、android-studio、expo
我的应用程序中有一个React Native Picker (下拉菜单)。当我在我的Android模拟器/模拟器中点击它时，下拉菜单将无法工作；什么也不会发生。此外，在Android模拟器/仿真器中，样式不起作用(边框不显示)。 当我尝试单击Web浏览器模拟器/仿真器中的下拉列表时，它确实按预期工作。此外，Web模拟器/仿真器中的样式对于下拉列表是正确的，但是Web浏览器模拟器/仿真器上的其他所有内容的样式都是混乱的。 下面是我的代码： import React, { useState } from "react";
import { StyleSheet, Picker,
浏览 53提问于2020-07-24得票数 2
2回答
react native:有什么方法可以在选择器周围添加框架，让它看起来更漂亮？
javascript、reactjs、react-native
如何在选取器周围添加框架？在我的例子中，我试图在选择器周围做一个框架，让它看起来更漂亮，但我没有成功，我也不清楚为什么。我运行的是安卓系统，周围看不到框架 import { Picker } from '@react-native-community/picker';
<Picker
mode="dropdown"
//pickerStyleType={}
selectedValue={selectedValue}
style={{
color:
浏览 27提问于2020-09-16得票数 1
1回答
选择器是动态创建的？
typescript、react-native
我是新的反应本地人和TypeScript。我想知道是否可以完全动态地创建一个选择器。例如，不使用(const selectedQLType，setQLTypePicker = useState('');)是否可以动态创建这些状态变量，这样您就可以使用一个映射函数(例如，基于一个参数数组)生成多个选择器？
import {Picker} from '@react-native-picker/picker';
..。const selectedQLType，setQLTypePicker = useState('')；
return (
浏览 1提问于2022-03-30得票数 0
回答已采纳
4回答
React原生选取器onPress
react-native
我是第一次接触react-native。在我的代码中，我使用了react-native选择器。当我点击选取器时，我希望触发pickerActivity()，但它甚至在我点击之前就被触发了(在点击之前被触发了三次)。下面是我的代码
pickerActivity(){
alert("PICKER PRESSED")
}
render(){
return(
<Picker
onPress={this.pickerActivity()}
selectedValue={this.state.language}
style={{ height: 50, width: 1
浏览 1提问于2018-08-02得票数 0
1回答
在下拉列表中设置重置按钮
reactjs、react-native、button、drop-down-menu
我是新来的本地人。我已经做了下拉列表，但我想要一个重置按钮，每当我点击它重置默认标签。这是我的简单下拉列表代码，我想要一个重置按钮。
<Picker
style={{width:'80%'}}
selectedValue={this.state.PickerValue}
onValueChange={(itemValue,itemIndex) =>
this.setState({PickerValue:itemValue})}>
<Picker.Item label="Select a option" value
浏览 0提问于2018-11-15得票数 3
回答已采纳
1回答
解散react本机模态导致ui冻结
react-native、modal-dialog
我的问题是关于反应本机模式。当模态打开并按下按钮后，它就会关闭，UI就会变得没有响应。这是我的模态代码。任何帮助都是非常感谢的。
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
>
<View style={styles.modalContainer}>
浏览 2提问于2021-10-22得票数 0
1回答
React Native -按下按钮时打开拾取器
javascript、react-native
我在我的应用程序中使用了react-native-simple-picker，如果我使用默认的显示按钮，它在我的项目中工作得很好，但当我在项目中使用不同的按钮时，我想显示选取器。看起来ProposalPicker.js中的this.refs.picker.show()是需要调用的函数，但是我不确定如何从另一个组件文件访问它。目前，我的代码导致以下错误-‘`Cannot read property 'show’of undefined。感谢任何人的帮助。
ProposalPicker.js
import React, { Component } from 'react';
浏览 3提问于2018-09-27得票数 2
1回答
如何在react原生应用程序中隐藏按钮
reactjs、react-native
如何在React原生应用程序中仅在视图中隐藏该按钮？这是我的代码，如果我移除按钮，然后下拉菜单没有显示，那么我该怎么做才能隐藏按钮呢？ <View style={styles.container}>
<Picker
selectedValue={this.state.PickerSelectedVal}
onValueChange={(itemValue, itemIndex) => this.setState({PickerSelectedVal: itemValue})} >
&
浏览 11提问于2019-01-09得票数 1
回答已采纳
1回答
标头未在react本机中显示
javascript、reactjs、react-native
我想在我的应用程序的右侧包含一个可触摸的不透明度。目前，在我的应用程序中，我有一个与顶部标题空间重叠的侧边菜单，如下所示-
有没有办法把可触摸的不透明“打开”到右边？现在我只能将可触摸的不透明度放在右侧的侧边菜单中。
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
SafeAreaView,
TextInput,
Picker,
Button,
ScrollView,
} from 'react-
浏览 2提问于2020-11-26得票数 1
1回答
React Native - nsnumber类型的json值'0‘无法转换为nsstring
react-native
我正在尝试将一个在我的React App中工作的组件转换为React Native。然而，我在ios模拟器中得到了这个错误: nsnumber类型的JSON值'0‘无法转换为nsstring’以前有人遇到过这个问题吗？这似乎与其他所有人的风格有关。但我还没有做好造型。如果你需要更多信息，请告诉我，谢谢。 import React from 'react';
import { Text, View, Button, Picker } from 'react-native';
const baseMin = [];
for (var i=0; i &l
浏览 21提问于2020-04-05得票数 0
回答已采纳
1回答
本机反应:使用"KeyboardAwareScrollView“不起作用
javascript、reactjs、react-native、keyboard
我尝试使用来自的，它很有用，并且不知道为什么。我也试过与"KeyboardAvoidingView“合作，但没有帮助。我真的不明白问题在哪里，我很乐意在这个问题上提供指导或帮助，因为每次键盘隐藏文本框时，我都不知道如何处理这个问题。
这就是我的例子：
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
function NetuneyDigum() {
const navigation = useNavigation();
const [curre
浏览 1提问于2020-10-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
