如何在React Native中用FlatList实现动态数量的输入字段？

1. 该需求是否可行？ #

完全可行。React Native的状态管理机制和FlatList组件天生支持这种动态UI更新场景，能够实现按需添加输入字段并实时同步输入值到数组的功能。

2. 如何实现无需刷新即可动态更新输入字段的显示？ #

你当前代码的核心问题是直接修改了原状态数组，React无法检测到这种引用类型的内部变化，因此不会触发组件重渲染。解决方法是每次修改数组时都创建一个新的数组副本：

const addToList = () => {
  // 用扩展运算符创建原数组的新副本
  const newList = [...list];
  newList.push("");
  setList(newList);
};

当调用setList传入新数组时，React会检测到状态变化，自动触发FlatList的重渲染，从而在页面上新增输入字段，无需手动刷新页面。

3. 如何实现无需按钮即可将输入值存入数组？ #

通过TextInput的onChangeText事件，结合索引定位数组元素，实时更新对应位置的值即可。同时需要给TextInput绑定value属性，使其成为受控组件：

// 定义更新球员名字的函数
const updatePlayerName = (text, index) => {
  const updatedList = [...list];
  updatedList[index] = text;
  setList(updatedList);
};

// 在FlatList的renderItem中使用
renderItem={({item, index})=>{
  return(
    <TextInput
      placeholder="Type player name here"
      value={item} // 绑定当前状态值，确保输入框内容与数组同步
      onChangeText={(text) => updatePlayerName(text, index)} // 输入时实时更新数组
    />
  )
}}

完整修正后的代码 #

const TeamContentScreen = ({navigation}) => {
    const [list, setList] = useState([""]);

    const addToList = () => {
      const newList = [...list];
      newList.push("");
      setList(newList);
    };

    const updatePlayerName = (text, index) => {
      const updatedList = [...list];
      updatedList[index] = text;
      setList(updatedList);
    };

 return(
     <View>
         <Button onPress={addToList} title="+1 player"/> 

         <FlatList 
             data={list}
             keyExtractor={(e,i)=> i.toString()}
             renderItem={({item, index})=>{
                 return(
                     <TextInput
                         placeholder="Type player name here"
                         value={item}
                         onChangeText={(text) => updatePlayerName(text, index)}
                     />
                 )
             }}
         />
     </View>
 )
}
export default TeamContentScreen;

内容的提问来源于stack exchange，提问作者Black Shark