React Native App 尝试在 Picker 中使用 FlatList答案

【问题标题】：React Native App trying to use FlatList inside of PickerReact Native App 尝试在 Picker 中使用 FlatList
【发布时间】：2020-01-22 13:46:16
【问题描述】：

我对 React Native 很陌生，但对 React 非常熟悉。我有一个问题似乎无法解决。

import React from "react";
import { Picker, FlatList, View, Text } from "react-native";

var numberArray = ["1", "2", "3", "4"];

// for (var i = 1; i <= 60; i++) {
//   numberArray.push(i);
// }

const Input = () => {
  numberArray.map(arr => {
    console.log(arr);
  });
  return (
    <Picker
      //   selectedValue={this.state.language}
      style={{ height: 50, width: 100 }}
      //   onValueChange={(itemValue, itemIndex) =>
      //     this.setState({ language: itemValue })
      //   }
    >
      <FlatList
        keyExtractor={title => title}
        data={numberArray}
        renderItem={({ item }) => {
          return <Picker.Item label={item} value={item} />;
        }}
      />
      <Picker.Item label="test" value="test" />
    </Picker>
  );
};

export default Input;

我正在努力让它发挥作用。我想创建一个包含 Picker 的所有项目的数组。然而，唯一出现的 Picker Item 是我做的测试。谁能向我解释我做错了什么？谢谢！

【问题讨论】：

标签： reactjs react-native react-native-flatlist react-native-picker-select

【解决方案1】：

Picker.Item 组件必须是 Picker 组件的子组件，因此不要使用 Flatlist，只需映射您的数据并直接返回一个数组。

import React from "react";
import { Picker, FlatList, View, Text } from "react-native";

var numberArray = ["1", "2", "3", "4"];

// for (var i = 1; i <= 60; i++) {
//   numberArray.push(i);
// }

const Input = () => {
  numberArray.map(arr => {
    console.log(arr);
  });
  return (
    <Picker
      //   selectedValue={this.state.language}
      style={{ height: 50, width: 100 }}
      //   onValueChange={(itemValue, itemIndex) =>
      //     this.setState({ language: itemValue })
      //   }
    >
      {numberArray.map(item => (
          <Picker.Item key={item} label={item} value={item} />
      )}
      <Picker.Item label="test" value="test" />
    </Picker>
  );
};

export default Input;

【讨论】：

【解决方案2】：

没有平面列表

   <Picker
      selectedValue={this.state.language}
      style={{ height: 50, width: 100 }}
      onValueChange={(itemValue, itemIndex) =>
       this.setState({ language: itemValue })
      }
    >
      { 
        numberArray.length > 0 ? 
        numberArray.map(item =>  <Picker.Item label={item} value={test} /> ):
        ''
      }
    </Picker>

使用平面列表

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({ language: itemValue })
  }
>
  <FlatList
    keyExtractor={ item => item }
    data={numberArray}
    renderItem={({ item }) => <Picker.Item label={item} value={item} />;
    }
  />
</Picker>

【讨论】：