React-Native实现可滚动View组件卡片的Picker滚轮效果咨询

首先明确说：React Native的内置Picker组件没法实现你要的滚动自定义卡片（View组件）的效果，因为它的设计就是用来展示文本类选项的，Picker.Item只能接受label和value属性，没办法直接嵌套自定义View——这也是你的代码只显示标签的原因，内置Picker根本不支持渲染复杂的View内容。

那要实现滚动卡片的Picker效果，推荐用现成的npm包，这里给你两个靠谱的选择：

1. react-native-snap-carousel #

这个包专门用来实现带有“吸附”效果的轮播/滚动选择器，完美适配你的需求：支持自定义任意View作为卡片内容，纵向/横向滚动都可以，滚动结束会自动吸附到选中的卡片，和Picker的交互逻辑一致。

简单示例代码： #

首先安装依赖：

npm install react-native-snap-carousel --save

核心使用代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';

class CardPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: 0,
      cards: [
        { id: 1, content: <View style={styles.card}><Text>卡片1</Text></View> },
        { id: 2, content: <View style={styles.card}><Text>卡片2</Text></View> },
        { id: 3, content: <View style={styles.card}><Text>卡片3</Text></View> },
      ]
    };
  }

  renderItem = ({ item }) => {
    return item.content;
  };

  onSnapToItem = (index) => {
    this.setState({ selectedIndex: index });
    // 这里可以处理选中后的逻辑，比如获取对应的值
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>当前选中第{this.state.selectedIndex + 1}张卡片</Text>
        <Carousel
          layout="default"
          layoutCardOffset={18}
          data={this.state.cards}
          renderItem={this.renderItem}
          sliderWidth={300}
          itemWidth={250}
          vertical={true} // 设置为纵向滚动，模拟Picker的垂直选择逻辑
          onSnapToItem={this.onSnapToItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    height: 250,
    width: 250,
    backgroundColor: '#fff',
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  }
});

export default CardPicker;

2. react-native-wheel-picker（贴近原生Picker质感） #

如果你想要更贴近原生Picker的滚轮样式，但又支持自定义内容，这个包也可以考虑，不过它的自定义灵活性不如snap-carousel，适合需要原生滚轮交互质感的场景。

另外，如果想自己实现，也可以用ScrollView结合react-native-reanimated来做滚动吸附和选中判断，但这样需要处理很多细节（比如滚动速度、吸附逻辑、选中状态高亮），不如直接用现成的包高效。

总结一下：内置Picker完全行不通，直接用react-native-snap-carousel就能快速实现你要的滚动卡片Picker效果，自定义性拉满。

内容的提问来源于stack exchange，提问作者Adam Lagevik