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

在渲染方法中，您可以创建如下变量：

 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>
        );
    }
}

这里的工作示例tinydb

有没有一种方法可以将<Picker.Item />插入到具有数组的<Picker> </Picker>中？

2 个答案: