时间戳

首页 > 解决方案 > 我是 react-native 新手，我无法显示我的图像

reactjs - 我是 react-native 新手，我无法显示我的图像

问题描述

我正在尝试在我的应用程序中显示图像但我不能，图像没有显示并且没有看到任何错误，感谢您的帮助。这是我的代码。

这是包含存储库的所有数据的文件，并且还呈现<RepositoryItem>每个存储库的组件。

主要的.jsx

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem';

const repositories = [
    {
        id: 'jaredpalmer.formik',
        fullName: 'jaredpalmer/formik',
        description: 'Build forms in React, without the tears',
        language: 'TypeScript',
        forksCount: 1589,
        stargazersCount: 21553,
        ratingAverage: 88,
        reviewCount: 4,
        ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4',
    }
];

const ItemSeparator = () => <View style={styles.separator} />;

const RepositoryList = () => {
    const renderItem = ({item}) => <RepositoryItem item={item} />;
    
    return (
        <SafeAreaView>
        <FlatList
            data={repositories}
            ItemSeparatorComponent={ItemSeparator}
            renderItem={renderItem}
            keyExtractor={item => item.id}
        />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    separator: {
      height: 10,
    },
  });

export default RepositoryList;

这是显示每个存储库的文件。

项目.jsx

import React from 'react';
import { Text, View, Image } from 'react-native';

const Item = ({ fullName, 
        description, 
        language, 
        forksCount, 
        stargazersCount, 
        ratingAverage,
        ownerAvatarUrl,
        reviewCount }) => (
  <View>
    <Text>Full name: {fullName}</Text>
    <Text>Description: {description}</Text>
    <Text>Language: {language}</Text>
    <Text>Stars: {stargazersCount}</Text>
    <Text>Forks: {forksCount}</Text>
    <Text>Reviews: {reviewCount}</Text>
    <Text>Rating: {ratingAverage}</Text>
    <Image source={{ uri: ownerAvatarUrl }} />
  </View>
);

const RepositoryItem = ({ item }) => {
    return (
      <View>
        <Image ownerAvatarUrl={item.ownerAvatarUrl} />
        <Item
          fullName={item.fullName}
          description={item.description}
          language={item.language}
          stargazersCount={item.stargazersCount}
          forksCount={item.forksCount}
          reviewCount={item.reviewCount}
          ratingAverage={item.ratingAverage}
        />
      </View>
    );
};

export default RepositoryItem;

谢谢你的帮助

标签： reactjsreact-native

解决方案

我通过进行这些更改来解决它，首先我添加了样式以使图像更小并进行了一些更改。这是现在的 Item.jsx 文件。

import React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  tinyLogo: {
    width: 50,
    height: 50,
  }
});
const Item = ({ fullName, 
        description, 
        language, 
        forksCount, 
        stargazersCount, 
        ratingAverage,
        ownerAvatarUrl,
        reviewCount }) => (
  <View>
    <Image
        style={styles.tinyLogo}
        source={{
          uri: ownerAvatarUrl,
        }}
      />
    <Text>Full name: {fullName}</Text>
    <Text>Description: {description}</Text>
    <Text>Language: {language}</Text>
    <Text>Stars: {stargazersCount}</Text>
    <Text>Forks: {forksCount}</Text>
    <Text>Reviews: {reviewCount}</Text>
    <Text>Rating: {ratingAverage}</Text>
  </View>
);

const RepositoryItem = ({ item }) => {
    return (
      <View>
        {/* <Image ownerAvatarUrl={item.ownerAvatarUrl} /> */}
        <Item
          fullName={item.fullName}
          description={item.description}
          language={item.language}
          stargazersCount={item.stargazersCount}
          forksCount={item.forksCount}
          reviewCount={item.reviewCount}
          ratingAverage={item.ratingAverage}
          ownerAvatarUrl={item.ownerAvatarUrl}
        />
      </View>
    );
};

export default RepositoryItem;

推荐阅读