平面列表中没有显示图像我在这里缺少什么？

Question

我在 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;

Answer 1

播放器容器：{ 身高：70， 宽度：70， flexDirection: '行', 底部边距：16， alignItems: '中心', }

或者将您的图像包裹在另一个视图中，并为该视图提供与您在图像中提供的相同高度和宽度的样式：