74279


掲題の通りです。  
ImageについてwidthとheightのstyleSheetを与えているのにも関わらず、画像が表示されません。  
ググりまくっているのですが解決方法が見当たらないため質問させて頂きました。

やりたい事はredditに公開されているJSONデータをもとに、記事の画像とタイトルを横並びに表示し、一覧化するだけのアプリです。

※書籍を参考にして勉強しているものの、古い書籍であるため、記述方法をクラスコンポーネントから関数コンポーネントに置き換えたりしてコードを試している状況です。

[code]

    import React, { useState, useEffect } from "react";
    import {
      ActivityIndicator,
      StyleSheet,
      Text,
      View,
      FlatList,
      StatusBar,
      Image,
    } from "react-native";
    
    export default function App() {
      const [isLoading, setLoading] = useState(true);
      const [data, setData] = useState([]);
      const renderItem = ({ item }) => {
        return (
          <View style={styles.item}>
            <Image style={styles.image} sourse={{ uri: item.data.thumbnail }} />
            <Text>{item.data.title}</Text>
          </View>
        );
      };
      const keyExtractor = (item) => item.data.url;
    
      useEffect(() => {
        fetch("https://www.reddit.com/r/newsokur/hot.json")
          .then((response) => response.json())
          .then((json) => setData(json.data.children))
          .catch((error) => console.error(error))
          .finally(() => setLoading(false));
      }, []);
    
      return (
        <View style={styles.container}>
          {isLoading ? (
            <ActivityIndicator size="large" color="#0000ff" />
          ) : (
            <FlatList
              data={data}
              renderItem={renderItem}
              keyExtractor={keyExtractor}
            />
          )}
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
        flexDirection: "column",
      },
      item: {
        flexDirection: "row",
        width: "100%",
      },
      image: {
        width: 50,
        height: 50,
      },
    });
    
[/code]


CC BY-SA 4.0
2021-02-24T08:07:44.033
74243
2021-02-25T16:21:06.240
2021-02-24T09:00:55.097
44068
44068
question
javascript json reactjs 画像 react-native
JSONデータからFlatListに設定したURLがImageで表示できない


誤

[code]

            <Image style={styles.image} sourse={{ uri: item.data.thumbnail }} />
    
[/code]

正

[code]

            <Image style={styles.image} source={{ uri: item.data.thumbnail }} />
    
[/code]


CC BY-SA 4.0
2021-02-25T16:21:06.240
74279
2021-02-25T16:21:06.240
44068
74243
answer