TouchableOpacity 不明白我在觸摸哪里

Question

我是 React 的新手，我正在嘗試用三個不同的圖標制作一個菜單框。 我希望圖標是可觸摸的，所以我可以根據按下的圖標執行一些操作。 我遇到的問題是每次我在菜單中執行觸摸時，都會執行最后一個圖標的操作，即使它的區域只是菜單的最低三分之一。

編輯：我的朋友在 android 模擬器上運行該項目並且它工作，但是當我在 IOS 模擬器上運行它時，它沒有。

export default function Menu() {

  //Need to find 3 pics for each main function
  const rating = "../assets/abc.png";
  const comment = "../assets/abc.png";
  const drawing = "../assets/abc.png";

  return (
      <View style={styles.menuBox}>
        <View style={styles.menu}> 

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('First image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Second image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Last image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>

        </View>
      </View>
  );
}

const styles = StyleSheet.create({
    //Black box
    menuBox: {
        alignSelf: "flex-end",
        height: "80%",
        width: "8%",
        borderRadius: 50,
        backgroundColor: "black",
        opacity: 0.85,
        position: "absolute",
        right: "1%"
    },
    //Area inside black box
    menu: {
        flex: 1
    },
    //Area for each icon
    iconcontainer: {
        flex: 1/3,
        justifyContent: "center",
        alignItems: "center",
    },
    //Actual icon
    icon: {
      resizeMode: "contain",
      width: 90
    }
});

Answer 1

您的樣品應該可以工作，請查看樣品

Answer 2

原來我在造型上犯了幾個錯誤。 這是工作代碼：

export default function Menu() {

  //Need to find 3 pics for each main function
  const rating = "../assets/abc.png";
  const comment = "../assets/abc.png";
  const drawing = "../assets/abc.png";

  return (
      <View style={styles.menuBox}>

          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('First image clicked')}>
              <Image source={require(rating)} style={styles.icon}/>
          </TouchableOpacity>
      
          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Second image clicked')}>
              <Image source={require(comment)} style={styles.icon}/>
          </TouchableOpacity>
        
          <TouchableOpacity style={styles.iconcontainer} onPress={() => Alert.alert('Last image clicked')}>
              <Image source={require(drawing)} style={styles.icon}/>
          </TouchableOpacity>

      </View>
  );
}

const styles = StyleSheet.create({
    //Black box
    menuBox: {
        height: "80%",
        width: "8%",
        borderRadius: 50,
        backgroundColor: "black",
        opacity: 0.85,
        position: "absolute",
        right: "1%"
    },
    
    //Area for each icon
    iconcontainer: {
        flex: 1,
    },
    //Actual icon
    icon: {
      flex: 1,
      resizeMode: "contain",
      width: "100%"
    }
});