0

我对 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 是我做的测试。谁能向我解释我做错了什么？谢谢！

4

2 回答 2

0

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;
于 2020-01-22T13:58:54.320 回答
0

没有平面列表

   <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>
于 2020-01-22T14:00:53.907 回答