React Native:我如何获得Picker的值并将其添加到Flatlist

Question

我正在使用React-Native，并希望获得Picker的selected item的值，并将其添加到FlatList这是我的Picker

  const [selectedValue, setSelectedValue] = useState('');
  <Picker
          selectedValue={selectedValue}
          style={{ height: 50, width: 150 }}
          onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        >
          <Picker.Item label="Food" value="java" />
          <Picker.Item label="Transport" value="transport" />
          <Picker.Item label="Rent" value="js" />
          <Picker.Item label="Other" value="other" />
        </Picker>

这是我的Flatlist和Button OnPress它应该将这个值添加到Flatlist

<Button
          title="Add me"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
 <FlatList
          data={data}
          renderItem={({ item }) => (<Text style = {styles.item}> {item.name}</Text>)}
          keyExtractor={(item, index) => index.toString()}  
           />

item.name是我从文本输入中获得的值，我也想添加拾取器值，但无法解决拾取器

Answer 1

import React, { Component, useState } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
  FlatList
} from 'react-native';
import { hScale, vScale, fScale } from 'react-native-scales';
import { Picker } from '@react-native-picker/picker';
const App = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [selectedValueData, setSelectedValueData] = useState([]);
  return (
    <View >
      <FlatList
          extraData={selectedValueData}
          data={selectedValueData}
          renderItem={({ item }) => {return <Text>{item.name}</Text>}}
          keyExtractor={(item, index) => index.toString()}  
           />
        <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          setSelectedValue(itemValue);
          if (!selectedValueData.some((i) => i.name === itemValue)) {
            setSelectedValueData([...selectedValueData, { name: itemValue }]);
          }
        }}>
        <Picker.Item label="Food" value="java" />
        <Picker.Item label="Transport" value="transport" />
        <Picker.Item label="Rent" value="js" />
        <Picker.Item label="Other" value="other" />
      </Picker>
    </View>
  );
};
export default App;

Answer 2

这可能有帮助

const [data, setData] = useState([...]);
// add selected item to list
const addItemToList = () => {
  const newData = [...data];
  newData.push(selectedValue);
  setData(newData);
};
<Button
  title="Add me"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
  onPress={addItemToList} // add onPress
/>

Answer 3

试试

import React, { Component, useState } from 'react';
    import {
      Text,
      Alert,
      TouchableOpacity,
      Button,
      TextInput,
      View,
      StyleSheet,
      FlatList
    } from 'react-native';
    import { hScale, vScale, fScale } from 'react-native-scales';
    import { Picker } from '@react-native-picker/picker';
    
    const App = () => {
      const [selectedValue, setSelectedValue] = useState('');
      const [selectedValueData, setSelectedValueData] = useState([]);
      const addToList = () =>{
         if (!selectedValueData.some((i) => i.name === selectedValue)) {
                setSelectedValueData([...selectedValueData, { name: selectedValue }]);
              }
      }
      return (
        <View >
          <FlatList
              extraData={selectedValueData}
              data={selectedValueData}
              renderItem={({ item }) => {return <Text>{item.name}</Text>}}
              keyExtractor={(item, index) => index.toString()}  
               />
            <Picker
            selectedValue={selectedValue}
            style={{ height: 50, width: 150 }}
            onValueChange={(itemValue, itemIndex) => {
              setSelectedValue(itemValue);
            }}>
            <Picker.Item label="Food" value="java" />
            <Picker.Item label="Transport" value="transport" />
            <Picker.Item label="Rent" value="js" />
            <Picker.Item label="Other" value="other" />
          </Picker>
          <TouchableOpacity onPress={addToList}>
             <Text>Add</Text>
          </TouchableOpacity>
        </View>
      );
    };
    
    export default App;