React Native新手求助：点击按钮用FlatList+函数式组件动态生成TextInput

下面是可直接运行的实现方案，适配React Native的组件特性，满足你点击按钮动态生成输入框的需求：

import React, { useState } from 'react';
import { View, TextInput, FlatList, Button, StyleSheet } from 'react-native';

const DynamicTextInputList = () => {
  // 维护输入项数组，每个项包含唯一id和输入值
  const [inputItems, setInputItems] = useState([]);

  // 生成唯一id避免FlatList重复key
  const generateUniqueId = () => `input-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

  // 添加新输入项的逻辑
  const addNewInput = () => {
    setInputItems(prevItems => [
      ...prevItems,
      { id: generateUniqueId(), value: '' }
    ]);
  };

  // 更新指定输入项的内容
  const updateInputValue = (id, newValue) => {
    setInputItems(prevItems => 
      prevItems.map(item => 
        item.id === id ? { ...item, value: newValue } : item
      )
    );
  };

  return (
    <View style={styles.container}>
      {/* 创建按钮 */}
      <Button title="创建新输入框" onPress={addNewInput} />

      {/* FlatList渲染动态输入项 */}
      <FlatList
        data={inputItems}
        keyExtractor={item => item.id}
        style={styles.inputList}
        renderItem={({ item }) => (
          <TextInput
            style={styles.input}
            value={item.value}
            onChangeText={(text) => updateInputValue(item.id, text)}
            placeholder={`输入内容 ${item.id.slice(-5)}`}
          />
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 50,
  },
  inputList: {
    marginTop: 20,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
});

export default DynamicTextInputList;

核心逻辑说明 #

• 状态管理：用inputItems数组存储所有输入项，每个项的id保证FlatList渲染的唯一性，value对应输入框的内容
• 添加输入框：点击按钮时向数组追加新的空输入项，通过随机字符串+时间戳生成唯一id
• 输入内容更新：每个TextInput的onChangeText触发时，通过id定位对应项并更新其value，确保每个输入框内容独立维护
• FlatList适配：React Native中用FlatList代替原生JS的map遍历，更适合长列表性能优化，keyExtractor指定唯一key避免渲染警告

这个实现的核心思路和ReactJS一致，只是替换了React Native的专属组件（TextInput替代input，FlatList替代普通列表渲染），逻辑完全通用。

内容的提问来源于stack exchange，提问作者Himadrish K Aralere