React Native App пытается использовать FlatList внутри Picker - PullRequest
Новая
       15

React Native App пытается использовать FlatList внутри Picker

0 голосов
/ 22 января 2020

Я довольно новичок в 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 Item - это тест, который я сделал. Может кто-нибудь объяснить мне, что я делаю не так? Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 января 2020

Без Flatlist 

   <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>

С Flatlist 

<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>
0 голосов
/ 22 января 2020

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;
...