我在React Native中做了一个应用程序，你可以在平面列表中添加一个“玩家”和他/她的“位置”，之后，用户应该能够制作一张图片，它应该在平面列表中显示它以及名称和位置。
我试着在不同的React版本中运行它，试着在样式组件中调整它的大小，甚至更改源代码名称。似乎什么都不起作用。显然，甚至ChatGPT也不知道这个问题的答案：（。
我做错了什么或者我忽略了什么？代码如下
附言：我只是一个学生，所以不要对我太苛刻......而且，这个应用程序只是在模拟器中运行

import React, { useState } from 'react';
import { FlatList, TouchableOpacity, StyleSheet, Text, Image, Button, View, TextInput } from 'react-native';
import { launchCamera } from 'react-native-image-picker';

const App = () => {
  const [players, setPlayers] = useState([]);
  const [name, setName] = useState('');
  const [position, setPosition] = useState('');
  const [image, setImage ] = useState(null);
  
  const addPlayer = () => {
    setPlayers([...players, { name,position, image: null }]);
    setName('');
    setPosition('');
    setImage(null)
  };

  const openCamera = () => {
    let options = {
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    launchCamera(options, (res) => {
      setImage(res);
      console.log('response = ', res.assets[0].uri);

    });
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Enter player name"
      />
      <TextInput
        style={styles.input}
        value={position}
        onChangeText={setPosition}
        placeholder="Enter position"
      />
      <TouchableOpacity onPress={addPlayer} style={styles.button}>
        <Text style={{ color: '#fff' }}>Add Player</Text>
      </TouchableOpacity>
      <FlatList
  data={players}
  renderItem={({item}) => (
    <View style={styles.playerContainer}>
      {item.image && item.image.uri && (
        <Image
          source={{ uri: item.image.uri }}
          style={{width:60, height:60,borderRadius:30, backgroundColor: black}}
        />
      )}
      <View style={{alignItems:"center",flex:1}}>
        <Text style={{fontWeight:"bold"}}>{item.name}</Text>
        <Text>{item.position}</Text>
      </View>

      <Button
        title="Take Picture"
        onPress={(openCamera)}
      />
    </View>
  )}
  keyExtractor={item => item.name}
      />
</View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
  },
  button: {
    backgroundColor: 'blue',
    padding: 12,
  },
  playerContainer: {
    flexDirection: 'row',
    marginBottom: 16,
    alignItems: 'center',
  },
  playerImage: {
    width: 60,
    height: 60,
    borderRadius: 25,
  
  },
  playerName: {
    fontSize: 18,
  },
});

export default App;