將圖像 URL 傳遞給 React Native 中的功能組件

Question

我希望我的頭像組件顯示帶有傳遞給組件的 URL 的頭像。 因此，如果我通過 avatar1，它會顯示 avatar1。 我嘗試了幾種方法，但似乎沒有任何效果。

我的頭像組件目前看起來像這樣。 我想擺脫 static URL

export default function Avatar() {

  return (
    <Image source={require("../assets/avatar.png")} style={styles.avatarStyle} />
  );
}
const styles = StyleSheet.create({
  avatarStyle: {
    resizeMode: 'contain',
    height: "60%",
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});

Answer 1

可能你試圖通過道具傳遞這個 avatar1 所以你需要使用道具，將它傳遞給 function

export default function Avatar({avatarUri}) {
    
      return (
        <Image source={{uri: avatarUri}} style={styles.avatarStyle} />
      );
    }
    const styles = StyleSheet.create({
      avatarStyle: {
        resizeMode: 'contain',
        height: "60%",
        alignSelf: "flex-start",
        position: "absolute",
        bottom: 0
      }
    });

https://reactnative.dev/docs/props

Answer 2

確保接下來的事情：

• Image path檢查正確路徑
• 您應該將width樣式參數添加到圖像中，它是渲染所必需的。
• resizeMode它是 Image 的道具，而不是樣式參數

固定風格：

const styles = StyleSheet.create({
  avatarStyle: {
    height: "60%",
    width: 150, // FOR EXAMPLE
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});

完整代碼：

export default function Avatar() {

  return (
    <Image source={require("../assets/avatar.png")} style={styles.avatarStyle} resizeMode='contain'/>
  );
}
const styles = StyleSheet.create({
  avatarStyle: {
    height: "60%",
    width: 150, // FOR EXAMPLE
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});