React native react native上的卡下拉列表

是否可以在react native上实现组件下降

---

像这样的。对不起，我有绘画技巧。提前感谢。

您可以创建如下自定义组件，您可以更改渲染标签以支持所需的视图

此示例需要数据与下面的对象类似，但您可以创建自己的对象

const dataArray = [{value: 'Car', id: 1,},{value: 'Van',id: 2},{ value: 'Bus',id: 3}];

   //Usage
    <CustomDropDown data={dataArray} />

const CustomDropDown = (props) => {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState(-1);

  const renderLabel = (item) => {
    return (
      <View
        style={{
          width: 200,
          height: 60,
          borderWidth: 1,
          borderRadius: 10,
          padding: 5,
          marginVertical: 3,
        }}>
        <Text style={{ fontSize: 20 }}>{item.value}</Text>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text>{item.value}</Text>
          <Text style={{ fontSize: 15 }}>{item.value}</Text>
        </View>
      </View>
    );
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity
        onPress={() => {
          setSelected(item.id);
          setOpen(!open);
          //Call back to external state
        }}>
        {renderLabel(item)}
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <TouchableOpacity style={{}} onPress={() => setOpen(!open)}>
        {selected === -1 && <Text>Place holder text</Text>}
        {selected !== -1 &&
          renderLabel(props.data.find((x) => x.id === selected))}
      </TouchableOpacity>
      {open && (
        <View
          style={{
            position: 'absolute',
            top: 70,
          }}>
          {props.data.map((item) => renderItem(item))}
        </View>
      )}
    </View>
  );
};

constdataarray=[{value:'Car'，id:1，}，{value:'Van'，id:2}，{value:'Bus'，id:3}]；
//用法
常量自定义下拉列表=（道具）=>{
const[open，setOpen]=React.useState（false）；
const[selected，setSelected]=React.useState（-1）；
常量renderLabel=（项）=>{
返回(
{item.value}
{item.value}
{item.value}
);
};
const renderItem=（项）=>{
返回(
{
所选项目（项目id）；
setOpen（！open）；
//回调到外部状态
}}>
{renderLabel（项目）}
);
};
返回(
setOpen（！open）}>
{selected===-1&&placeholder text}
{已选定！==-1&&
renderLabel（props.data.find（（x）=>x.id==selected））}
{打开&&(
{props.data.map（（项）=>renderItem（项））}
)}
);
};

是否要为此创建自己的组件？是的，这就是重点。我知道只有文本，但这不是我想要的@Guruparangiritharandi你试过我的答案吗？是的，我试过了，我不得不改变一些事情，但我喜欢结果，谢谢。太好了，不客气：）