如何在Picker Wheel中使用循环批量生成1-100数字选项

直接通过数组遍历批量渲染选项即可，无需手动编写每一项，针对组件仅支持字符串值的要求，遍历过程中做一次类型转换就能适配。

修正后完整代码 #

import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useState } from 'react';

const PickerComp = () => {
  // 初始值设为字符串类型，和选项value类型保持一致
  const [daysGone, setDaysGone] = useState("1");

  // 一行生成1-100的整数数组
  const numberRange = Array.from({ length: 100 }, (_, index) => index + 1);

  return (
    <View style={styles.container}>
      <Picker
        selectedValue={daysGone}
        onValueChange={(itemValue) => setDaysGone(itemValue)}
      >
        {/* 遍历数组批量生成选项 */}
        {numberRange.map(num => (
          <Picker.Item
            key={num}
            label={`${num}`}
            value={`${num}`}
          />
        ))}
      </Picker>
      <Text>当前选中值：{daysGone}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 48,
    paddingHorizontal: 16
  }
})

export default PickerComp;

实现说明 #

• 不需要写冗长的for循环，Array.from可以快速生成指定长度、指定规则的连续数字数组
• 给Picker.Item传label和value时，用模板字符串`${num}`把数字转为字符串，完全符合组件的参数类型要求
• 每个遍历生成的组件要加唯一key属性，避免React渲染报警告
• 状态初始值用字符串类型，和选项value类型匹配，不会出现默认选中态失效的问题
• 如果习惯用for循环写法，也可以先声明空数组，循环1-100把每一项转成字符串后push到数组里，再遍历数组渲染，效果一致只是代码量稍大

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