在 React Native 中使用圖片其實跟 HTML 中使用圖片一樣簡單，在 React Native 中我們使用Image組件來呈現圖片的內容，其中主要的屬性有：source。這個屬性主要是設置圖片的內容，它可以是網絡圖像地址、靜態資源、臨時本地圖像以及本地磁盤中的圖像。

制作一個圖片案例

搭建基礎框架

export default function ImageCard() {return (<View style={[styles.card, styles.cardElevated]}><Imagestyle={styles.cardImage}source={{uri: "https://cdn.pixabay.com/photo/2020/05/05/17/49/tree-5134167_960_720.jpg",}}/><View style={styles.cardBody}><Text style={styles.cardTitle}>風景攝影是對攝影師的最高考驗——而且往往是最令人失望的。</Text><Text style={styles.cardLabel}>風景</Text><Text style={styles.cardDescription}>自從年輕的安塞爾·亞當斯 (Ansel Adams) 于 1916年在優勝美地國家公園度假時拍攝了他的第一張照片（使用他父親送給他的柯達布朗尼相機）以來，攝影師們一直試圖記錄我們星球的無限美麗和威嚴。為了慶祝我們的 2022風景攝影獎，我們調查了我們之前獎項的一些最佳提交和selected 10 幅令人驚嘆的風景圖像，展示了該類型的巨大潛力。</Text><Text style={styles.cardFooter}>2023.08.13</Text></View></View>);
}const styles = StyleSheet.create({card: {},cardElevated: {},cardImage: {},cardBody: {},cardTitle: {},cardLabel: {},cardDescription: {},cardFooter: {},
});

編寫卡片樣式

card: {borderRadius: 8,marginHorizontal: 12,marginVertical: 16
},
cardElevated: {backgroundColor: '#FFFFFF',elevation: 3,shadowOffset: {width: 1,height: 1}
},

編輯卡片內容相關樣式

cardBody: {paddingHorizontal: 12
},
cardTitle: {color: '#000000',},
cardLabel: {color: '#000000',marginTop: 6
},
cardDescription: {color: '#000000',fontSize: 12,marginBottom: 12,marginTop: 6,flexShrink: 1,lineHeight: 22,textAlign: 'justify'
},
cardFooter: {color: '#000000',fontSize: 12,marginBottom: 8
}

編輯圖片樣式

cardImage: {height: 180,marginBottom: 8,borderTopLeftRadius: 6,borderTopRightRadius: 6
},

運行效果如下