Question

我是React Native的初学者，并且努力通过单击按钮然后将这些Components放到平面列表中来添加另一个TextInput（作为组件）

这是我的主屏幕

import React, { useState } from 'react'
import {
    View,
    Text,
    Button,
    FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'

const AddInputDemo = props => {
    const addInput = () => {
        //....
    }
    return(
        <View style={{flex: 1}}>
            <Button
                title='Add a location'
                onPress={addInput}
            />
            <FlatList
                keyExtractor={(item, index) => item.id}
                data={} // I really can't figure it out what to put in this prop
                renderItem={itemData => (
                    <InputDemo />
                )}
            />
        </View>
    )
}

export default AddInputDemo;

这是我的InputDemo组件：

import * as React from 'react'
import {
    View,
    Text,
    TextInput,
    Button
} from 'react-native'

const InputDemo = props => {
    return(
        <View>
            <TextInput
                placeholder='Search'
            />
        </View>
    )
}

export default InputDemo;

Answer 1

的 data 道具是要用于 FlatList 和 renderItem 是为您提供的 data 道具中的每个项目调用的功能。

对于查询，您需要使用state和setState来跟踪要在FlatList中显示的输入数量

import { useState } from "react";
const AddInputDemo = props => {
    const [numberOfInputs, setNumberOfInputs] = useState([1]) // initial count is 1, so one input will be displayed

    const addInput = () => {
      setNumberOfInputs([...numberOfInputs, 1]);
    }
    return(
        <View style={{flex: 1}}>
            <Button
                title='Add a location'
                onPress={addInput}
            />
            <FlatList
                keyExtractor={(item, index) => item.id}
                data={numberOfInputs}
                renderItem={itemData => (
// it will be called as many times u increase the numberOfInputs array
                    <InputDemo />
                )}
            />
        </View>
    )
}

Answer 2

React Native Flatlist采用data数组道具。它代表一个数组，其中每个元素都描述一个列表项，并且数组元素可以是一个对象，该对象可以包含任意数量的用于描述列表元素的属性。

Flatlist需要第二个道具renderItem，该函数使用数据元素呈现列表项。

如下面的示例所示，我们将使用名为placeholder的单个属性配置数据数组元素，并将其作为对renderItem中呈现的组件的支持而注入

const AddInputDemo = () => {
    // define your list with a setter in the state
    const [list, setList] = useState([]);

    const addInput = () => {
        // add a new object to the list and set it to the state
        setList([...list, { placeholder: 'something' }]);
    };

    return (
        <View style={ { flex: 1 } }>
            <Button title="Add a location" onPress={ addInput } />
            {/* add your list to the data prop and setup the */}
            {/* renderItem prop with the list item */}
            <FlatList keyExtractor={ ({ id }) => (id) } data={ list }
                      renderItem={ ({ item }) => (<InputDemo item={ item } />) } />
        </View>
    );
};

const InputDemo = (props) => {
    return (
        <View>
            {/* use the configured data from the props */}
            <TextInput placeholder={ props.item.placeholder } />
        </View>
    );
};

如何通过单击按钮添加另一个TextInput？

2 个答案: