掲題の通りです。
ImageについてwidthとheightのstyleSheetを与えているのにも関わらず、画像が表示されません。
ググりまくっているのですが解決方法が見当たらないため質問させて頂きました。
やりたい事はredditに公開されているJSONデータをもとに、記事の画像とタイトルを横並びに表示し、一覧化するだけのアプリです。
※書籍を参考にして勉強しているものの、古い書籍であるため、記述方法をクラスコンポーネントから関数コンポーネントに置き換えたりしてコードを試している状況です。
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,
},
});