有没有办法通过数组将<Picker.Item />插入到<Picker> </Picker>中？

Question

我为Picker编写的代码如下所示，但我不能用数组覆盖和执行Picker项。

我该怎么做呢？

import React, {useState} from 'react';
import {View,Picker} from 'react-native';

export default class TA extends React.Component {
    render(){
        return (
            <View style={{flex: 1,alignItems: 'center'}}>
                <Picker style={{width: 150,height: 60}} selectedValue="1">
                <Picker.Item label="1" value="1" />
                <Picker.Item label="2" value="2" />
                <Picker.Item label="3" value="3" />
                <Picker.Item label="4" value="4" />
                <Picker.Item label="5" value="5" />
                <Picker.Item label="6" value="6" />

                //from here onwards

                {()=>{
                   let p = [];
                   for(let i = 7 ; i < 12 ; i++){
                      p.push(<Picker.Item label={i} value={i} />)
                   }
                   return p;
                }}

                </Picker>
            </View>
        );
    }
}

Answer 1

在render方法中，可以创建一个变量，如下所示：

 let pickerItems =
  
  pickerArray.map((value, index) => {
    return (
      <Picker.Item
        label={value}
        value={value}
      />
    );
  });

在您的选择器中使用此变量，如下所示：

 <Picker>
   {pickerItems}
 </Picker>

Answer 2

它是基于您的代码的解决方案之一

import React from 'react';
import {View,Picker} from 'react-native';

export default class TA extends React.Component {
    render(){
      
      const myArr = () => {
        var p = [];
        for(let i = 7 ; i < 12 ; i++){
          p.push(i)
        } return p;
      }
      var newArr = myArr() 

        return (
            <View style={{flex: 1,alignItems: 'center'}}>
                <Picker style={{width: 150,height: 60}} selectedValue="1">
                <Picker.Item label="1" value="1" />
                <Picker.Item label="2" value="2" />
                <Picker.Item label="3" value="3" />
                <Picker.Item label="4" value="4" />
                <Picker.Item label="5" value="5" />
                <Picker.Item label="6" value="6" />

                {newArr.map((item, index) => {
                   return (<Picker.Item label={item} value={item} key={index}/>) 
                })}
  
                </Picker>
            </View>
        );
    }
}

此处的工作示例https://codesandbox.io/s/keen-vaughan-dt742?file=/src/Select.js:0-908