我想做下拉列表，但选择器在React Native中出错

Question

我想做一个下拉列表，但这段代码中的选择器不起作用。如何制作下拉列表？这段代码运行所有其他的东西，比如(文本等(，但当我添加picker时，它会出现错误。那么，如何制作下拉列表呢？

import { useState } from "react";
import { View, Picker, StyleSheet, Text} from "react-native";
export default function app() {
const [pickerval, setPickerval] = useState('java')
return(
<View style={styles.container}>
<Text>helo</Text>
<Picker style={styles.picker} selectedValue = {pickerval} onValueChange={(itemValue) => setPickerval(itemValue)}  >

<Picker.Item label= "java" value= "java" />
<Picker.Item label= "a" value= "a" />
<Picker.Item label= "d" value= "d" />
</Picker>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})

Answer 1

使用这个包，

从"react native picker select"导入RNPickerSelect；

示例代码：

import RNPickerSelect from 'react-native-picker-select';
<RNPickerSelect
placeholder = {{label: "Select Topic"}}
onValueChange={(value) => console.log(value)}
items={[
{label: 'Grammar', value: '1'},
{label: 'Poems', value: '2'},
{label: 'Biography', value: '3'},
{label: 'Meaning', value: '4'},
]}
/>

Answer 2

您可以尝试这个例子，根据React Native Picker指南，他们删除了Picker，并将移到此处分离

import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import {Picker} from '@react-native-picker/picker';
const PickerExample = () => {
const [pickerval, setPickerval] = useState('java');
return (
<SafeAreaView>
<View style={styles.container}>
<Text>helo</Text>
<Picker
style={styles.picker}
selectedValue={pickerval}
onValueChange={itemValue => setPickerval(itemValue)}>
<Picker.Item label="java" value="java" />
<Picker.Item label="a" value="a" />
<Picker.Item label="d" value="d" />
</Picker>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
picker: {flex: 1},
});
export default PickerExample;